0

ブラウザー ウィンドウ内に完全に収まる Web ページを設計しているため、スクロールは非表示になっています。

ページの上部に幅 100%、高さ 40px のヘッダーバーがあります。ヘッダーバーの下には、ページの左側に幅 15% のナビゲーション バーがあり、ページの右側に幅 85% のコンテンツ領域 DIV があります。

ナビゲーション バーとコンテンツ領域の高さをページの下部まで動的に拡張することはできません。すべての画面サイズで、ナビゲーション バーとコンテンツ領域の両方をページの下部まで拡張する最善の方法は何ですか?

参考までに、私のHTMLコードは次のようになります。

<div id="headerBar">Header Bar</div>
<div id="navigationBar">Navigation Bar</div>
<div id="contentArea">Content Area</div>

そして私のCSSコードは次のようになります:

#headerBar{
    width:100%;
    height:40px;
    background:rgb(35,35,35);
}

#navigationBar {
    width:15%;
    height:100%; /* Note that this doesn't work */
    background:red;
}

#contentArea {
    width:85%; /* if I use any padding or margin this box exceeds the browser width */
    background:blue;
    height:100%;  /* as with #navigationBar, this doesn't work */
    float:right;
}

+1 任意のソリューションに! 前もって感謝します！！

4

3 に答える 3

2

ここにフィドルがあります：http://jsfiddle.net/surendraVsingh/cFkaU/

CSS

html, body { height:100%; }
#headerBar{
    width:100%;
    height:40px;
    background:rgb(35,35,35);
}

#navigationBar {
    width:15%;
    height:100%; /* Note that this doesn't work */
    background:red;
    float:left;
}

#contentArea {
    width:85%; /* if I use any padding or margin this box exceeds the browser width */
    background:blue;
    height:100%;  /* as with #navigationBar, this doesn't work */
    float:right;
}​
于 2012-07-09T12:25:35.363 に答える
2

本当に、本当にこのようなレイアウトが必要な場合は、次の方法で実行できますposition:fixed;。

#headerBar {
    background:rgb(35,35,35);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 40px;
}
#navigationBar {
    background:red;
    position: fixed;
    top: 40px;
    left: 0;
    bottom: 0;
    width: 15%;
}
#contentArea {
    background: blue;
    position: fixed;
    top: 40px;
    right: 0;
    bottom: 0;
    width: 85%;
}

ただし、お勧めしません。小さな画面などでは深刻な問題を引き起こします。

于 2012-07-09T12:33:27.300 に答える
1

これを試して：

#contentArea {
    height:auto !important; 
    height:85%; 
    min-height:85%;
}
于 2012-07-09T12:27:15.637 に答える