html - 具有填充页面高度的div

Question

不幸的是，我对 div 的高度总是有同样的问题。我希望我的 div(如果内容最少)填满显示器。否则，如果内容超出页面我使用滚动条(overflow:scroll)，这部分就可以了。

我的页面是这样组成的:

 <div id="container">
    <div id="header"> ...</div>
            <div id="navigation"> ... </div>
            <div id="content"> ... 
                <div id="testo"></div>
            </div>

我希望 div 内容与浏览器页面的高度匹配。

如果您观看此示例 http://jsfiddle.net/EBnD2/

你能明白我的问题是什么。

提前致谢!

Answer 1

Here's a script driven solution :

还有脚本(为方便起见，我使用了 jQuery。如有必要，请随意使用纯 javascript:

$(document).ready(function () {
    $("#content").css("height", 
        (
        $(document).outerHeight() 
      - $("#header").outerHeight() 
      - $("#navigation").outerHeight() 
      - $("#footer").outerHeight()
      - parseInt($("#content").css("padding"))) + "px");
    });

这是更新后的样式定义:

html {
}
body {
    min-width: 1150px;
    overflow: auto;
    background-color: pink;
    margin: 0px;
}
#container {
    margin: 0 100px;
    background: #fff;
    border-top: 1px solid grey;
    font-family: sans-serif;
}
#header {
    text-align:center;
    background: #ccc;
    padding: 20px;
    border-left: 1px solid grey;
    border-right: 1px solid grey;
}
#header h1 {
    margin: 0;
}
#testo {
    font-family: times, Times New Roman, times-roman, georgia, serif;
    font-size: 18px;
    line-height: 30px;
    text-transform: uppercase;
    color: #444;
}
p.sx {
    text-align: left;
}
p.cx {
    text-align: center;
}
p.dx {
    text-align: right;
}
#navigation {
    float: left;
    width: 100%;
    background: #CC3366;
    font-weight: bold;
    font-size: 90%;
    font-size-adjust: inherit;
}
#navigation ul {
    margin: 0;
    padding: 0;
}
#navigation ul li {
    list-style-type: none;
    display: inline;
}
#navigation li a {
    display: block;
    float: left;
    padding: 5px 10px;
    color: #fff;
    text-decoration: none;
    border-right: 1px solid #fff;
}
#navigation li a:hover {
    background: #993366;
}
#navigation li a.selected {
    background: grey;
}
#content {
    background-color: white;
    border-left: 1px solid grey;
    border-right: 1px solid grey;
    padding: 20px;
}
#content h2 {
    color: #000;
    font-size: 160%;
    margin: 0 0 .5em;
}
#footer {
    border: 1px solid grey;
    background: #ccc;
    text-align: right;
    padding: 20px;
}