0

我正在设计一个完全适合浏览器窗口的网页，因此隐藏了滚动。

我在页面顶部有一个标题栏，宽度为 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 回答