忽然就发现自己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时
求解鸭~