html - 标题+内容在不滚动的情况下达到 100% 高度的最佳解决方案是什么

Question

我有一个三列的 css 布局，顶部有一个标题。左边是导航，右边是一个小栏目，可能有一些广告，中间是内容。我希望左侧、右侧和中间的 DIV 位于页面底部(所以我想我需要高度:100%)并且我希望页眉具有 60 像素的固定高度。我尝试了几种在互联网上找到的解决方案，但如果给每个人 100% 的高度(这样“右”和“左”的背景到页面底部)我总是需要滚动一点。我很确定，那是因为 header 具有绝对高度值。尽管我把所有东西都放在一个高度为 100% 的容器中。

我的 html 看起来像这样:

<div id="container">
    <div id="header"><h1>Header</h1></div>
        <div id="left">
            <ul id = "nav">
                <li><a href="link.html">Link1</a></li>
                <li><a href="link.html">Link2</a></li>
            </ul>
        </div>

        <div id="right"><p>Advertisement 1 </p><p>Advertisment 2</p></div>
        <div id="middle">
            some content
        </div>
    </div>  

对应的CSS是:

html,body{
    height:100%;
    margin:0;
    padding:0;
    line-height: 1.5em;
}

#container{
    position:relative;
    width: 850px; /*Width of main container*/
    margin: 0 auto; /*Center container on page*/
    height:100%;
}

#header{
    width: 850px;
    background: #EAEAEA;
    height: 90px; /*Height of top section*/
    text-align: center;
}

#left {
    width: 200px;
    float:left;
    background: #CCFFFF;
    height:100%


}
#middle{
    width: 490px;
    margin-left:200px;
    padding-left:10px;
    height:100%;

}

#right {
    width: 150px;
    float: right;
    background: #e0eeee;
    height:100%;

}

#left ul {
    padding: 0;
    list-style: none;   
    width: 200px;

}

提前谢谢你。

Answer 1

在您的#container id 中将position: relative; 更改为position: absolute;。此时，您的左侧、中间和右侧可能位于标题后面。如果是这样，您将添加 top: 90px; 确保 top 之后的值与标题 div 的高度匹配。