HTML/CSS

要素の高さを親要素の高さに合わせる

floatした左右の divの高さを自動で合わせたい

以下のコードみたいな感じで floatした左右の divの高さを自動で揃えたいときってあるんだよね。

何も考えずにやると、普通はこうなっちゃうんだけど 

そんときゃ小要素の children-aを floatして左に寄せておいて、children-bの positionを absoluteにすりゃ願いは叶う。

そうすりゃこうなってハッピーになれる 

positionを absoluteにした要素の上下、右を 0にすんのが肝だな。

positionを absoluteにして高さを合わせた場合の弱点

ただし、この方法には弱点があって floatした要素の高さに揃うもんで、常にそっちのほうが高くなきゃいけない。

逆に positionを absoluteにした要素のほうが高くなるとこうなっちゃう 

レイアウトや文字数が固定してるページ以外には使えないか 

関連記事
ブログランキング・にほんブログ村へ

コメントを残す

メールアドレスが公開されることはありません。