Question

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

页面顶部有一个标题栏，宽度为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任何解决方案！在此先感谢!!

Answer 1

这里是小提琴：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;
}

Answer 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%;
}

但是，我不推荐它。这将导致小屏幕等严重问题。

Answer 3

试试这个：

#contentArea {
    height:auto !important; 
    height:85%; 
    min-height:85%;
}

HTML / CSS基本布局问题

3 个答案: