今回はCSSにおける heightとmax-height の使い分け方について。
「高さを設定するheightプロパティはあるけど、max-height とどう使い分ければいいのか？」
と思っていたので、調べてみた。
高さを中身の要素に関係なく一定に保つ場合は heightで設定する。
中身に応じて伸び縮みさせて、最大値だけ決めておきたい時は
max height⇨overflow-y
と合わせて使うことが多いみたいだ。
では、
「overflow-yってなに？？」
って話だけど、overflow-yプロパティは、ボックスの範囲内に内容が収まらない場合に、はみ出た要素の上下の表示方法を指定する際に使用するプロパティ。
なぜmax-heightとセットで使うことが多いかというと、
max-heightで高さの最大値を設定すると、写真とかを入れた場合に入り切らない場合、下もしくは上が途中で切れてしまうことが起こりやすい。
でも、overflow-yプロパティを設定しておくと、切れてしまった残り部分をスクロールさせて表示出来るようにしたり、ボックスからはみ出して常時表示させたりさせたりできる。
1つの例は、max-heightで高さの最大値を指定して、切れた部分はoverflow-y:scroll でスクロールで表示されるって方法だ。
