When using “Viewport Height/vh” in CSS does it include the “browser bookmark bar” in the total?

跟風遠走 提交于 2019-12-06 15:36:55

vh uses the size of the viewport. So if you have the bookmarks bar open, then your viewport height is going to be smaller. Would be similar to just resizing your window and make the height smaller.

https://www.w3.org/TR/css-values-3/#viewport-relative-lengths

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly. However, when the value of overflow on the root element is auto, any scroll bars are assumed not to exist. Note that the initial containing block’s size is affected by the presence of scrollbars on the viewport.

https://www.w3.org/TR/CSS21/visudet.html#containing-block-details

The containing block in which the root element lives is a rectangle called the initial containing block. For continuous media, it has the dimensions of the viewport and is anchored at the canvas origin; it is the page area for paged media.

The viewport height, when using vh units will always be the inner width of the viewport (visible area of the document), ignoring browser Chrome.

100vh will be 100% of the viewable browser height whether the bookmark bar is enabled or not.

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/length

Viewable height of the webpage only. The client toolbars are part of the application window, not the viewport.

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!