min-heightの使い方【はみ出し防止】ソースあり!

2020年2月29日



スポンサードサーチ

ブロック要素なのにはみ出してる!!

とか思ったりしませんか?特に初心者。

親要素height数値指定×子要素floatのカラム落ち=はみ出る

という現象に陥ったことがあります。

【結論】
heightをmin-heightにすればいい。

上の画像のは可変させて縮めた時にフロートが効いてる要素が、カラム落ちして、その親要素の下を突き出してしまった時で、その改善方法を書きます。

See the Pen PvVzZP by spooky (@tupeono10) on CodePen.0

フロートが効いてる要素の親要素のheightに「min-」をつけてあげます。
min-height:200px;にしたら最低が200pxということになるので、突き抜けることなく子要素と一緒に動いてくれます。

高さを気にしないならheight:auto;でもいいです。

※私の勘違いで、ブロック要素は突き出さないという先入観でとまどったので、この記事を書きました。

これですっきり!