基础款弹性布局样式

忽然就发现自己css部分也是挺薄弱的，准备系统复习，顺便分析案例

今日案例：

重点：要适配！ ( 10rem是计算得到的，可以撑满整个页面的宽度，不需要适配的宽度可以设置为auto ）

<div class="page">
    <div class="content">
        <div class="banner"></div>
        <div class="main" id="main"></div>
    </div>
    <div class="button">
        <button class="back">文案</button>
        <button class="next">文案</button>
    </div>
</div>

以下是css部分，省略掉一些字体、背景色等基础设置：

首先给整个页面设置弹性布局，子元素垂直排列

同时给内容区（content）也设置弹性布局，让其在整个页面填满剩余的空间，如果内容过多，会显示滚动条

/* 通配符选择器重置所有元素的边距和内边距 */
* {
    margin: 0;
    padding: 0;
}


.page {
    display: flex; /* 使用 Flexbox 弹性布局 */
    flex-direction: column; /* 子元素垂直排列 */
    height: 100vh; /* 高度为视口高度的 100% */
    height: var(--app-height); /*这是一个 CSS 变量，通常在 JavaScript 或 CSS 中定义。此行将高度设置为这个变量的值，如果定义了 --app-height，它会覆盖 100vh*/
    .content {
        display: flex;
        flex-direction: column;
        flex-grow: 1; /* 填满page剩余的空间 */
        overflow: auto;  /* 如果内容超出区域，显示滚动条 */
    }
}

内容区有一个固定在顶部的banner，另一个div.main占满其余部分

.page .banner{
    width: 10rem; /* 宽度为 10rem */
    padding: 20px 15px; /* 设置内边距：上下 20px，左右 15px */
    box-sizing: border-box; /* 包括内边距和边框在内计算总宽度和高度 */
}

.page .main {
    flex-grow: 1; /* 填满父元素剩余的空间 */
    position: relative; /* 使子元素可以绝对定位，因为main内部还有内容 */
    padding: 5px 20px 0;  /* 内边距：上 5px，左右 20px，下 0 */
    overflow-x: hidden; /* 隐藏水平溢出内容 */
}

最后是固定在底部、同行等分显示的两个按钮

.page .button {
    box-sizing: border-box;
    display: flex; /* 使用 Flexbox 布局，将子元素按行排列 */
    width: 10rem;
    bottom: 0; /* 固定在容器的底部 */
    padding: 0.2rem 0.4rem; /* 内边距：上下 0.2rem，左右 0.4rem */
    .back, .next {
        flex: 1; /* 子元素在主轴（行方向）上平分可用空间 */
        width: 98%; /* 宽度设置为 98% 以适应父元素的宽度 */
        box-sizing: border-box;
    }
}

问题：

在内容区设置了 .main{  overflow-x: hidden; }，看起来应该是隐藏水平溢出内容的作用（避免x轴出现滚动条），但实际y轴滚动条的起始位置变了，且下拉时，有overflow-x的样式，banner是固定不动的，没有overflow-x的是会随之上移消失的，如图所示:

有overflow-x时（绿色部分是banner）

---

没有overflow-x时

 求解鸭~