要素の高さを設定するheightについて解説

height とは、要素の高さを設定するプロパティです。

height を指定するときは主に px、％、vh のどれかを使って指定します。

heightをpxで指定

height を px で指定したときは、ブラウザの画面幅を変更しても高さを固定で保ちます。

それでは指定方法と実際の表示を見ていきましょう。

<div class="height-px"></div>

.height-px {
　width: 100%;
　height: 400px;
　background-color: red;
}

上記のように height を px で指定したので高さは400pxになります。

px で指定した高さは固定になるので、ブラウザの画面幅を変更しても、指定した高さが固定で変わらないことを確認してみてください。

heightを%で指定

height を % で指定したときは、親要素の高さを基準にして相対的に高さが決まります。

それでは指定方法と実際の表示を見ていきましょう。

<div class="height-parent">
　<div class="child-class"></div>
</div>

.height-parent {
　width: 100%;
　height: 400px;
　background-color: red;
}

.child-class {
　width: 100%;
　height: 50%;
　background-color: blue;
}

上記の表示のように height を % で指定したときは親要素の高さを基準にして相対的に高さが決まります。

今回は height: 400px; の赤背景に対して height: 50%; の青背景の指定しています。

こちらもブラウザの高さを変更しても50%の青背景の高さが相対的に保たれるところを確認してみてください。

heightをvhで指定

height を vh で指定したときは、ブラウザの高さを基準にして相対的に高さが決まります。

それでは指定方法と実際の表示を見ていきましょう。

<div class="height-vh"></div>

.height-vh {
　width: 100%;
　height: 20vh;
　background-color: red;
}

上記の表示のように height を vh で指定したときはブラウザの高さを基準にして相対的に高さが決まります。

今回は height: 20vh; を指定しているのでブラウザの高さが1000pxの時は赤背景の高さは200pxになります。

こちらもブラウザの高さを変更して20vhの高さが相対的に保たれるところを確認してみてください。

この記事では height について解説しました。

height とは、要素の高さを設定するプロパティです。

height を指定するときは主に px、％、vh のどれかを使って指定します。

それぞれの内容を理解して使い分けていきましょう。

最後までお読みいただきありがとうございます。