ちょっとディープな生物の世界

【CSS】ある要素を調度画面いっぱいの大きさにする方法:viewportパーセンテージ

widthを100%・heightを100vhに指定する

width:100%、height100%にすると、そのコンテンツ分の100%しか得ることができません。コンテンツが空ならば何も表示されません。

See the Pen height:100vhについて by バイオハックch (@synd1090) on CodePen.

vhとは? vhは画面に対しての割合を示す単位です。例えば、10vhならば画面に対して10%の割合を示します。100vhは画面100%です。

vhとは?

vhは画面(ビューポート)の高さに対する割合です。10vhならば画面の10%の値、100vhならば画面100%の値を示します。

See the Pen rNMNjEQ by バイオハックch (@synd1090) on CodePen.

viewportパーセンテージには他にも種類がある

次のような種類があります。

  • vw :ビューポートの幅に対する割合
  • vmin :ビューポートの幅と高さのうち、値が小さい方に対する割合
  • vmax:ビューポートの幅と高さのうち、値が大きい方に対する割合

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です