html - 柔軟な高さへのソリューション

Question

4 つの列があり、同じ行で終わるように表示されるように高さの値を設定することにしましたが、柔軟なレイアウトに取り組んでいます。つまり、ブラウザのサイズが縮小されてページが狭くなった場合ボックスの高さを拡張する必要があります。では、高さの値を設定せずにボックスの高さを均等に設定するにはどうすればよいでしょうか?

Answer 1

私の理解が正しければ、すべての列を同じ高さにしたいと思います。

次のように、div をテーブル セルとして表示することで、これを修正できます。

HTML:

<div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

CSS:

body > div {
    display: table;
    width: 100%;
}
div > div {
    display: table-cell;
    width: 25%;
}

このデモもチェックしてください。1 列目をクリックしてテキストを追加します (これがどのように機能するかを確認するためです)。

Answer 2

これを達成するには多くの方法があります。以下のリンクを試してください。

http://css-tricks.com/fluid-width-equal-height-columns/

デモ