Search code examples
cssdomviewport

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


In Chrome, the bookmarks bar is disabled with command+shift+b. Should I always be testing sites with this disabled for the browser to truly be "100%"? Or does having this enabled actually make the "vh 95%" for example?


Solution

  • 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.