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

朱雀 2023-06-22 13:55 22阅读 0赞

废话不多说 , 先来看看问题

**期望的样子 :**  
![正确高度][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d5cHpw_size_16_color_FFFFFF_t_70_pic_center]  
**实际的样子 :**  
![错误高度][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d5cHpw_size_16_color_FFFFFF_t_70_pic_center 1]  
怎么样 , 看出问题了吧 , 那来看看代码吧 ! ( 只看有关的代码哦 )

// 此处使用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 本来可以占满屏幕 , 但它会默认将头部和底部也加进去了 , 所以会超出屏幕高度 , 那怎么解决呢 ?

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

遇到这个问题的小哥哥和小姐姐可以试试哦 , 看有没有解决呀!

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d5cHpw_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20191216175626313.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d5cHpw,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d5cHpw_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20191216175808476.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d5cHpw,size_16,color_FFFFFF,t_70#pic_center