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

解决height:100vh超出屏幕高度的问题min-height:calc(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 本来可以占满屏幕 , 但它会默认将头部和底部也加进去了 , 所以会超出屏幕高度 , 那怎么解决呢 ?

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

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/136770.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • java.lang.IllegalArgumentException 如何解决这个异常

    java.lang.IllegalArgumentException 如何解决这个异常很多人说这个异常是spring版本和jdk版本不一致导致的,其实不然你可以运行一下这一段代码publicstaticvoidmain(String[]args){StringtimeStamp=”1531782000000″;//直接是时间戳//longtimeStamp=System.currentTim…

  • 不一般的Cover Letter

    不一般的Cover Letter上篇文章的coverletter能罩得住大部分的期刊,但是你也知道,这个世界总是有例外的。上个月写了一篇文章,投稿的时候才记起来忘记了写coverletter,就顺手把那个模板找出来,填上空,加上几句描述性的语句,就把文章投出去了。过了两天,编辑发了一封邮件,说这个期刊最近改变了它的scope跟coverage,还更改了研究方向的类别。他希望我们能给出一个合理的理由来说明,投的文章适合期刊哪…

  • R语言做小提琴图_小提琴用英语怎么读?

    R语言做小提琴图_小提琴用英语怎么读?原创黄小仙即便小仙同学决定学习R语言来提升自己作图的“逼格”的时候,心中还有有些疑虑的(嘿嘿,我这么懒,可不愿意做无用功了

  • linux内外网配置_服务器内网ip

    linux内外网配置_服务器内网ip1、/etc/sysconfig/network-scripts/ifcfg-eth0创建这个文件里面的内容如下TYPE=“Ethernet”  BOOTPROTO=“none”  DEFROUTE=“yes”  IPV4_FAILURE_FATAL=“no”  NAME=“eth1”  DEVICE=“eth1”  ONBOOT=“yes”  IPADDR=“192.168…

  • ShellExecute, WinExec, CreateProcess的使用[通俗易懂]

    ShellExecute, WinExec, CreateProcess的使用[通俗易懂]ShellExecute  ShellExecute的功能是运行一个外部程序(或者是打开一个已注册的文件、打开一个目录、打印一个文件等等),并对外部程序有一定的控制。  有几个API函数都可以实现这些功能,但是在大多数情况下ShellExecute是更多的被使用的,同时它并不是太复杂。  ShellExecute函数原型及参数含义如下:  ShellExecute(

  • 小米6显示服务器出错,小米6解锁BL显示未连接手机解决办法以及各种小技巧汇总……

    小米6显示服务器出错,小米6解锁BL显示未连接手机解决办法以及各种小技巧汇总……本帖最后由为夫人而生于2017-6-2422:56编辑持续更新小米6未连接手机解决办法3:手机设置→关于手机→miui版本(一直点五次)→返回→更多设置→开发者选项→USB调试打开→手机绑定啥的解锁啥的都打开4:关机长按音量下加开机键出现兔子连接手机5:两种情况若显示连接直接解锁end;;;;;;;;;若显示没连接手机敲黑板重点来了右…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号