Chrome, vh Is Always Calculated as If the Url Bar

xioqua 发布于2019-08-23 13:53 / 934人阅读

The first time when I know vh I was very excited. Finally, we can do this by css instead of js. However, still too naive.

As we all know, scroll bar would hide automatically on mobile. So, it wouldn"t affect the layout like on desktop.

However, the address bar would also hide when scrolling. Like images below:

And the code is:



  
    
    
    
    Document
    
  

  
    
      
      
      app__footer

The viewport size changes when scrolling. In my Mi6X, the smaller is 659px while the larger one is 715px when the address bar is hidden.

According to test on chrome 70, height:100% and window.innerHeight is always equal to the smaller one. I think it is correct. I also thought 100vh would act like 100%. However, it"s not.

According to developers.google the vh is always calculated as if the URL bar is hidden since Chrome version 56.

So, 100vh is equal to the larger one which is 715px on my phone. That"s why images above would happen. In this case, if we use something like bottom:0; with 100vh we would meet situation like image one. Part of app__footer was covered. Instead, if we use height:100%, it won"t happen.

However, as we all know it wouldn"t be possible to use 100% when we were in nested css modules. So, in this case, how can we get the 100% in nested css modules?

Of course, we can save the 100% to rem like:

document.documentElement.style.fontSize = window.innerHeight * 0.01 + "px"

But I think the better way is using CSS_variables. For example:

html,
body,
.app {
  /* height: 100%; */
  /* height: 100vh; */
  height: calc(var(--vh) * 100);
}

document.documentElement.style.setProperty(
  "--vh",
  window.innerHeight * 0.01 + "px"
)

Also, if you are worried about the compatibility. Here is the polyfill.

Original Post

Reference

the-trick-to-viewport-units-on-mobile

CSS3 100vh not constant in mobile browser

云服务器 GPU云服务器 Calculated vh bar Always

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99733.html

Chrome, vh Is Always Calculated as If the Url Bar

The first time when I know vh I was very excited. Finally, we can do this by css instead of js. However, still too naive. As we all know, scroll bar would hide automatically on mobile. So, it wouldnt ...

gotham 2019-08-29 17:29 评论0 收藏0
flask 源码解析：请求

摘要：可以看到，虽然是同样的请求数据，在不同的阶段和不同组件看来，是完全不同的形式。请求还有一个不那么明显的特性它不能被应用修改，应用只能读取请求的数据。这是 flask 源码解析系列文章的其中一篇，本系列所有文章列表： flask 源码解析：简介 flask 源码解析：应用启动流程 flask 源码解析：路由 flask 源码解析：上下文 flask 源码解析：请求 flask 源码解...

weizx 2019-07-25 11:31 评论0 收藏0
根治JavaScript中的this-ECMAScript规范解读

摘要：执行函数调用规范中的第一步是一个明显的赋值语句，我们查看规范，赋值语句会发生什么可以看出简单赋值语句返回的是对等于号右边进行之后的结果，上一节讲了，执行过就会返回的类型，此处会返回也就是一个类型。前言 this是JavaScript中的著名月经题，每隔一段时间就有人翻出了拿各种奇怪的问题出来讨论，每次都会引发一堆口水之争。从搜索引擎搜了一下现在的比较热门的关于this的用法，如：Ja...

notebin 2019-08-22 10:33 评论0 收藏0
css3 attr 简单介绍和实例

摘要：表达式的计算值和属性的值与指定名称的元素有关根据下面的规则在的表达总是返回一个字符串。在没有命名空间这将只是一个标识符。本文不是w3c翻译保留原文的基础上做出自己的理解为主参考 http://www.w3.org/TR/2015/CR-css-values-3-20150611/#attr-notation attr函数介绍 The attr() fun...

GeekGhc 2019-08-28 18:13 评论0 收藏0
深入理解JavaScript内部原理： function（转）

摘要：注意，下面一个立即执行的函数，周围的括号不是必须的，因为函数已经处在表达式的位置，解析器知道它处理的是在函数执行阶段应该被创建的，这样在函数创建后立即调用了函数。本文是翻译http://dmitrysoshnikov.com/ecmascript/chapter-5-functions/#introduction 概要In this article we will talk abou...

OnlyLing 2019-08-21 10:37 评论0 收藏0