Question

我有一个三列css布局，顶部有一个标题。在左边会有导航，右边是一个小栏目，可能会有一些广告，中间会有内容。我想DIV左，右和中间到页面的底部（所以我想我需要高度：100％），我希望标题具有60px的固定高度。我尝试了几种解决方案，我在互联网上找到但是如果给每个人100％的高度（使得“右”和“左”的背景到页面的底部）我总是要滚动一下。我很确定，这是因为标题具有绝对高度值。即使我把所有东西放在一个高度为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的高度匹配。

标题+内容在没有滚动的情况下达到100％高度的最佳解决方案是什么

1 个答案: