解决height:100vh超出屏幕高度的问题
怎么样 , 看出问题了吧 , 那来看看代码吧 ! ( 只看有关的代码哦 )
- html
<div class="evaluation">
<div class="mint-header">555</div>
<div class="footer">footer</div>
</div>
<div class="footer">footer</div>
- scss
* {
margin: 0;
padding: 0;
}
.evaluation { // 最外边的div
width: 100%;
min-height: calc(100vh - 1.9rem); //这个页面只有头部,所以将头部的高度减去
/* padding-top: 0.9rem; */
background: #761212;
position: relative;
}
.mint-header { // 头部
height: 0.9rem;
background: #54bca2;
color: #444444;
font-size: 0.32rem;
border-bottom: 1px solid #cccccc;
}
.footer {
background: rgb(201, 53, 127);
}
- 决定性代码:
min-height: calc(100vh - 0.9rem);
注: 100vh 减去的可以是任意像素单位(px、rpx、em等), 此处运算符左右要有空格哟~~