解决height:100vh超出屏幕高度的问题

20220807142009

怎么样 , 看出问题了吧 , 那来看看代码吧 ! ( 只看有关的代码哦 )

  • 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等), 此处运算符左右要有空格哟~~

posted @ 2022-08-09 22:12  天使阿丽塔  阅读(871)  评论(0编辑  收藏  举报