解决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)
blank

相关推荐

  • css 的 opacity 属性

    css 的 opacity 属性opacity用于指定元素透明度,支持0~1之间的小数.默认值1-完全不透明,0-完全透明<!DOCTYPEhtml><htmllang=”en”><head><metacharset=”UTF-8″><title>opacity</title><style>/*opacity默认1,完全不透明0完全透明

  • webapp开发完整版

    webapp开发完整版1.开山篇关于本课程2.react-create-app,react-scripts与eject构建项目3.React新特性4.ReactHooks详解5.ReactRedux以及其API核心介绍6.渐进式WebApp搭建项目7.订票业务架构方案8.开发首页及站点及日期选择功能9.开发搜索结果展示页面10.react组件开发选座页面及…

  • k2p openwrt路由部署阿里云aliyun-ddns[通俗易懂]

    k2p openwrt路由部署阿里云aliyun-ddns[通俗易懂]之前一直有想法入手一个NAS,用于存储项目文件、照片及电影。本来想买个群晖218的,可喜的是赶上了星际蜗牛矿难(被骗的人好可怜,感同身受……),闪电下了一个D款的小蜗牛。星际蜗牛矿机安装群晖NAS的过程我就不说了,很简单,有需要的可以参照下面的文章。https://post.smzdm.com/p/adwl92zk/?send_by=8903307869家里的路由器是K2P同学帮刷的open…

  • 让AllocateHwnd接受一般函数地址作参数

    让AllocateHwnd接受一般函数地址作参数http://www.xuebuyuan.com/1889769.htmlClasses单元的AllocateHWnd函数是需要传入一个处理消息的类的方法的作为参数的,原型:functionAllo

  • c#设计登录界面并添加数据库_windows窗体连接数据库

    c#设计登录界面并添加数据库_windows窗体连接数据库本篇文章介绍了C#窗体的数据库连接及登录功能的实现工具或平台:VS2010、sqlserver20121.创建完窗体后,点击数据,选择添加新数据源2.选择数据库3.选择数据集4.新建连接-MicrosoftSQLServer,添加完测试一下5.添加数据库-注意把连接字符串部分复制一下,一会儿要用的6.保存连接字符串到配置文

  • 一文读懂C++虚继承的内存模型

    一文读懂C++虚继承的内存模型一文读懂C++虚继承的内存模型1、前言2、多继承存在的问题3、虚继承简介4、虚继承在标准库中的使用5、虚继承下派生类的内存布局解析6、总结1、前言C++虚继承的内存模型是一个经典的问题,其具体实现依赖于编译器,可能会出现较大差异,但原理和最终的目的是大体相同的。本文将对g++中虚继承的内存模型进行详细解析。2、多继承存在的问题C++的多继承是指从多个直接基类中产生派生类的能力,多继承的派生类继承了所有父类的成员。从概念上来讲这是非常简单的,但是多个基类的相互交织可能会带来错综复杂的设计问题,命名冲突

发表回复

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

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