height:100vh的应用

height:100vh的应用今天改移动端页面样式的时候因为height:100vh,导致我想超出部分滚动页面的效果没有做出来。就查查这玩意是啥意思。别人解释的height:100vhvh就是当前屏幕可见高度的1%,也就是说height:100vh==height:100%;但是当元素没有内容时候,设置height:100%,该元素不会被撑开,此时高度为0,但是设置height:100vh,该元素会被撑开屏幕高…

大家好,又见面了,我是你们的朋友全栈君。

今天改移动端页面样式的时候因为height:100vh,导致我想超出部分滚动页面的效果没有做出来。就查查这玩意是啥意思。

别人解释的height:100vh

vh就是当前屏幕可见高度的1%,也就是说
height:100vh == height:100%;
但是当元素没有内容时候,设置height:100%,该元素不会被撑开,此时高度为0,
但是设置height:100vh,该元素会被撑开屏幕高度一致。

但是会出现问题。当前我的页面内容过多,需要滚动条显示的时候,滚动到最下,还是无法显示我页面的全部内容,因为我顶部有其他标签。
在这里插入图片描述
所以说根据情况碰一碰啥样的情况可以用…滚去打代码了

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

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/140669.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • VCLibs库文件包下载_怎么使用已有的加速包

    VCLibs库文件包下载_怎么使用已有的加速包本文以MDI应用程序为例说明如何在已有的VC++工程中使用BCG界面库,我的开发环境为VS2003。1、将BCG/BCGCBPro目录路径添加到“项目属性->C/C++->常规->附加包含目录”中,同时将BCG/Bin目录路径添加到“项目属性->链接器->常规->附加库目录”中。2、确保在CWinApp派生类(设为CMyApp)的InitInstance()成员函数中调用AfxOl

    2022年10月8日
    2
  • Log4net用法

    Log4net用法日记是我们在程序中经常用到的,故记于此首先要下载Log4net.dll官方网站:http://logging.apache.org/log4net/vs里创建一个c#控制台程序,在App.con

    2022年7月2日
    26
  • Win10共享打印机提示0x0000011b错误代码的解决方法[通俗易懂]

    Win10共享打印机提示0x0000011b错误代码的解决方法[通俗易懂]首先是在共享打印机的主机Windows是更新kb5005565这个补丁所导致的,那么我们在控制面板-卸载程序里卸载掉2021-09-15Windows更新的补丁KB5005565后重启电脑就好了。然后禁止Win10更新操作方法:鼠标右键“win”图标在弹出的菜单栏中选择“运行”选项,打开运行窗口后输入“services.msc”, 在打开的窗口中找到“windowsUpdate”启用选项,并双击打开, 在弹出的小窗口中的启动类型选项处点击选择“禁用”,点击“确定”另外win11出现的错误代.

    2025年8月26日
    17
  • tomcat7和tomcat8的websocket区别

    tomcat7和tomcat8的websocket区别tomcat8真正支持jsr-356(包含对websocket的支持),tomcat7部分版本的websocket实现不兼容jsr-356。websocket实现tomcat7.x与tomcat8.x有很大差异。在tomcat7中使用websocket需要定义一个servlet,然后继承WebSocketServlet,在tomcat8中使用websocke。出自:http://blog.csd

    2022年7月18日
    24
  • SpringCloud之Eureka使用篇

    1.单例EurekaServer1.1环境准备1.首先我这里有spring-cloud-parentpom工程2.spring-cloud-eureka-serverEurekaServer子工程这里端口我们使用90开头3.spring-cloud-order-service-consumer订单调用服务(也就是咱们的服务消费者)这里端口我们使用80开头4.spring-cloud-order-service-provider订单提供服务(服务提供者)这里端口我们使

    2022年4月6日
    56
  • webstorm激活码2021年-激活码分享

    (webstorm激活码2021年)这是一篇idea技术相关文章,由全栈君为大家提供,主要知识点是关于2021JetBrains全家桶永久激活码的内容IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.htmlMLZPB5EL5Q-eyJsaWN…

    2022年3月20日
    138

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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