技術メモのかけら

内容はもとより調べたことすら忘れてしまうので個人的な技術メモを残しているブログです。Qiitaの記事にするほどでもない細かいネタを投稿します。

height指定なしでdivボックスの高さを合わせる

コンテンツが可変でheightを固定に出来ないときにdivボックスの高さを合わせる方法。

HTML

<div class="box">
    <div class="container1">あいうえお</div>
    <div class="container2">かきくけこさしすせそたちつてとなにぬねの</div>
</div>

padding-bottomで余白をもの凄く大きく指定して、margin-bottomを同じだけマイナスで指定する。
10000pxに特別な意味はなくて、内容が全部入る高さがあれば良い。
後は親のボックスにoverflow:hidden;を指定した溢れた分を非表示にすれば良い。

CSS

.box {
    overflow: hidden;
}
.container1 {
    background: #f00;
    float: left;
    overflow: wrap;
    width: 5em;
    padding-bottom: 10000px;
    margin-bottom: -10000px;
}
.container2 {
    background: #00f;
    float: left;
    overflow: wrap;
    width: 5em;
    padding-bottom: 10000px;
    margin-bottom: -10000px;
}

こんな感じに高さが揃う。

あいうえお
かきくけこさしすせそたちつてとなにぬねの