15621857753

响应式上部固定下部高度自适应并带滚动的解决方案

来源:齐鲁建站 栏目:开发教程 阅读: 日期:2021-07-12

本文介绍了响应式上部固定下部高度自适应的解决方案,第一步:先实现上部固定,下部高度自适应,第二步:使用overflow-y: auto;让Y轴浮动,第三步:使用@media,让高度适应不同的手机,以防出现白边,这样就可以了。

下面就来说说响应式解决方案的处理方法:

第一步:先实现上部固定,下部高度自适应

添加三部分代码

<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1,maximum-sacle=1,user-scalable=no">

CSS

.main{
height: 100%;
position: fixed;
width: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-flow: column;
}
.minfo{
flex: 0 0 430px;
width: 100%;
height: 430px;
}
.tzhi{
width: 100%;
left: 0;
bottom: 0;
padding: 7px 20px 0;
flex: 1;
overflow: auto;
}

DIV

<div class="main">
<div class="minfo">A</div>
<div class="tzhi">
<div class="tzhibox">B</div>
</div>
</div>

使用display:flex,一个固定高度,一个默认高度

有个要求:子元素只能俩个,如果是2个以上,就没效果

第二步:使用overflow-y: auto;让Y轴浮动

.tzhibox{
height: 100%;
overflow-y: auto;
}

第三步:使用@media,让高度适应不同的手机,以防出现白边

常用的几个手机型号

@media (max-width: 414px) {
.minfo{flex: 0 0 450px; height: 450px;}
}

@media (max-width: 375px) {
.minfo{flex: 0 0 433px; height: 433px;}
}

@media (max-width: 360px) {
.minfo{flex: 0 0 425px; height: 425px;}
}

@media (max-width: 320px) {
.tzhi{ padding: 0 20px 0;}
.minfo{flex: 0 0 415px; height: 415px;}
}

这样就实现了响应式上部固定下部高度自适应并带滚动的需求,想要实现这个功能的朋友看看吧。

展开