html - 4 列位置の絶対レイアウト

Question

ここで表示できるレイアウト設定があります: http://jsfiddle.net/Pn3ts/

すべて正常に動作しますが、ロット全体に最大/最小幅を設定する必要があります。

したがって、これを行うと仮定してposition: relative;、.rowクラスに追加します。しかし、これを行うと、それぞれの背景が.col崩壊するようです。(ここを参照してください: http://jsfiddle.net/YDBYK/ )

これをどのように機能させますか？

Answer 1

、html、bodyおよび.rowに 100% の高さを指定すると、機能します。

html, body {
    height: 100%;
}

.row {
    position: relative; 
    width:100%; 
    height: 100%;
    margin: 0; 
    max-width: 400px; 
    min-width: 300px;
}

jsFiddle: http://jsfiddle.net/YDBYK/1/