在 CSS 中使用 "Viewport Height/vh" 时，它是否将 "browser bookmark bar" 包括在总数中？

Question

在Chrome中，书签栏被command+shift+b禁用。我是否应该始终在禁用此功能的情况下测试网站，以使浏览器真正成为“100%”？或者是否启用此功能实际上使 "vh 95%" 例如？

Answer 1

视口高度，当使用 vh 单位时，将始终是视口的内部宽度（文档的可见区域），忽略浏览器 Chrome。

无论是否启用书签栏，100vh 都是浏览器可见高度的 100%。

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/length

Answer 2

vh 使用视口的大小。因此，如果您打开了书签栏，那么您的视口高度将会变小。类似于仅调整 window 大小并缩小高度。

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.

Answer 3

仅限网页的可见高度。客户端工具栏是应用程序 window 的一部分，而不是视口。