7

次のようなレイアウトを作成しようとしています。 ここに画像の説明を入力

上部と下部の両方に定義された高さがありますが、中央の左右の 2 つのセクションが利用可能なすべての垂直方向のスペースを占有するようにします。これが私がこれまでに得たものです。

http://jsfiddle.net/xTh5f/2/

ショーケースとして中央のセクションを正確に 500px にしましたが、ご覧のとおり、中央の右セクションと右下のセクションもめちゃくちゃにしました。

4

2 に答える 2

5

次のようなことを話しているでしょうか。

フルスクリーン(以下にリンクされているソース)

html, body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;;
    color: white;
}
#wrapper {
    display: table;
    width: 100%;
    height: 100%;
}
#wrapper > div {
    display: table-row;
}
#wrapper > div > div {
    display: table-cell;
}
#top,
#bottom {
    height: 50px;
}
#wrapper > div > #topleft,
#wrapper > div > #middleleft,
#wrapper > div > #bottomleft {
    width: 300px;
}
#wrapper > div > #middleleft {
    background: #23A9E0;
}
#wrapper > div > #middleright {
    background: #39E023;
}
#wrapper > div > #topright,
#wrapper > div > #bottomright {
    background: #208D11;
}
#wrapper > div > #topleft,
#wrapper > div > #bottomleft {
    background: #092A7C;
}

http://jsfiddle.net/xTh5f/4/

于 2012-09-16T02:47:24.810 に答える
1

どうぞ: http://jsfiddle.net/xTh5f/3/

私の変更:

html、body、#wrapper、#middle、#middleleft、#middleright には「高さ: 100%」が指定されます

次に、#middleleft に「float: left」、#middleright に「overflow;」を指定します。隠れた';

参照してください: http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/

于 2012-09-16T02:44:30.940 に答える