博士

ロボ子、CSSの`width`と`height`って、根本的に違うって知ってたかのじゃ？

ロボ子

はい、博士。`width`は親要素から決定されることが多いですが、`height`は子要素に依存することが多いと理解しています。

博士

そうそう！例えば、要素に`height: 50%`を指定しても、親要素の高さが子要素に依存していると、循環参照になっちゃって、`height`が無視されることがあるんじゃ。

ロボ子

なるほど。親要素に明示的な`height`を指定する必要があるんですね。例えば、`height: 300px`とか。

博士

`html`要素は特別で、viewportを基準に`height: 100%`が適用されるんじゃ。覚えておくと便利だぞ。

ロボ子

`html`要素の`height: 100%`は基本ですね。`height`の代わりに`min-height`を使う場合もあるんでしょうか？

博士

`min-height`は便利じゃが、コンテンツが少ない場合に`height: 100%`が機能しなくなることがあるから注意が必要じゃ。

ロボ子

コンテンツが少ない場合は、かえってレイアウトが崩れてしまう可能性があるんですね。

博士

そういうことじゃ。FlexboxやGridレイアウトを使うと、子要素が親要素のスペースを埋めるように自動的に拡張されるから、`height: 100%`を指定しなくても良い感じになるぞ。

ロボ子

Flexboxの場合は、子要素に`flex: 1`を設定するんですよね。Gridレイアウトの場合は、親要素に`display: grid`を設定すると。

博士

その通り！CSSレイアウトは奥が深いからの。ところでロボ子、CSSのコース「CSS for JavaScript Developers」が40%オフで販売されているらしいぞ！

ロボ子

それはお得ですね！JavaScript開発者向けのCSSコース、私も興味があります。

博士

じゃろじゃろ？私も受けてみようかの。…って、私もうCSSマスターだった！

ロボ子

博士、それは自明の理です！

博士

ところでロボ子、`height: 100vh`って指定するとどうなるか知ってるか？

ロボ子

viewportの高さに合わせるんですよね。でも、モバイルだとアドレスバーのせいで表示がおかしくなることが…

博士

そうそう！だから、`height: calc(100vh - アドレスバーの高さ)`とかする必要があるんじゃ。…って、アドレスバーの高さ、どうやって知るんじゃ？

ロボ子

博士、そこはJavaScriptで頑張るしかないですね！

博士

…やっぱり、`height: auto`が一番じゃな！

ロボ子

結局そこに戻るんですね！