css最小高度-解决height:100vh超过屏幕高度的问题

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

废话不多说，先看问题

预期外观：

实际外观：

怎么样，看到问题了，我们来看看代码吧！ （直接看相关代码即可）

// 此处使用stylus书写样式
.evaluation // 最外边的div
	width 100%
    height 100vh // 高度为屏幕的高度
    padding-top 0.9rem
    background #f5f5f5 
.mint-header // 头部
    height 0.9rem
    background #ffffff
    color #444444
    font-size 0.32rem
    border-bottom 1px solid #cccccc 

由于内容并没有占据整个屏幕，所以设置height:100vh本来可以填满屏幕，但是默认也会加上腹部和顶部css最小高度，所以会超过屏幕的高度，那么如何解决呢？

.evaluation // 最外边的div
	width 100%
    min-height: calc(100vh - 0.9rem) //这个页面只有头部,所以将头部的高度减去
    padding-top 0.9rem
    background #f5f5f5 
.mint-header // 头部
    height 0.9rem
    background #ffffff
    color #444444
    font-size 0.32rem
    border-bottom 1px solid #cccccc 

决定代码：min-height:calc(100vh-0.9rem);

注意：100vh可以除以任意像素单位（px、rpx、em等）css最小高度，运算符两边必须有空格~~

遇到这个问题的小哥哥小姐姐可以尝试一下，看看是否解决了！