CSSで「Viewport Height/vh」を使用すると、「ブラウザのブックマークバー」が合計で表示されますか？

Question

Chromeでは、コマンド+ shift + bでブックマークバーが無効になります。私は常にブラウザを「100％」にするために、この機能を無効にしたサイトをテストすべきでしょうか？それとも、これを有効にして実際に "vh 95％"を作るのですか？

Answer 1

VHは、ビューポートのサイズを使用しています。したがって、ブックマークバーが開いていると、ビューポートの高さは小さくなります。ウィンドウのサイズを変更して高さを小さくするのと同じようになります。

ビューポートのパーセンテージ長

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

は初期包含ブロックのサイズに対するものです。最初の包含ブロックの高さまたは幅が変更されると、それに応じて拡大または縮小されます。ただし、ルート要素のオーバーフローの値がautoの場合、スクロールバーは存在しないものとみなされます。最初の包含ブロックのサイズは、ビューポート上のスクロールバーの存在によって影響されることに注意してください。

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

ルート要素が住んでいるブロックを含むブロックを含む初期と呼ば 矩形です。連続メディアの場合、ビューポートの寸法は でキャンバスの原点に固定されています。ページングされたメディアのページ領域は です。

Answer 2

vh単位を使用する場合のビューポートの高さは、ブラウザのChromeを無視して、常にビューポートの内側の幅（ドキュメントの可視領域）になります。

100vhは閲覧可能なブラウザの高さの100％になります。ブックマークバーが有効かどうかは関係ありません。

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

Answer 3

ウェブページの表示可能な高さのみ。クライアントツールバーは、ビューポートではなくアプリケーションウィンドウの一部です。