Question

不幸的是，我总是和div的高度问题一样。我希望我的div（如果内容最小）填充显示器。另外，如果内容超出页面我使用滚动条（溢出：滚动），这部分没问题。

我的页面组成如下：

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

填充页面的高度div

1 个答案: