子要素がはみ出るheight(css)の解決方法
スポンサードサーチ
ブロック要素なのに、、、子要素がはみ出るheight(css)の解決方法
とか思ったりしませんか?特に初心者。
親要素height数値指定×子要素floatのカラム落ち=はみ出る
という現象に陥ったことがあります。
【結論】
heightをmin-heightにすればいい。
上の画像のは可変させて縮めた時にフロートが効いてる要素が、カラム落ちして、その親要素の下を突き出してしまった時で、その改善方法を書きます。
See the Pen PvVzZP by spooky (@tupeono10) on CodePen.0
フロートが効いてる要素の親要素のheightに「min-」をつけてあげます。
min-height:200px;にしたら最低が200pxということになるので、突き抜けることなく子要素と一緒に動いてくれます。
高さを気にしないならheight:auto;でもいいです。
※私の勘違いで、ブロック要素は突き出さないという先入観でとまどったので、この記事を書きました。
これですっきり!