Question

我正在尝试设计一个包含两个浮动divs的页面布局，我想将其用于我的内容区域和侧边栏。我的布局问题是我测试了其中一个带有大量文本内容的浮动divs，但它没有展开以显示所有内容。最后一段似乎与我的页脚重叠

我已将overflow: auto添加到包含div，但它似乎无法正常工作。有任何想法吗？

<body>

<div id="header">
</div><!--ends header-->

<div id="navbar">
</div><!--ends navbar-->

<div id="wrapper">

    <div id="content">

        <div class="post">
         <p> Long content tested here</p>
        </div><!--ends post-->

    </div><!--ends content-->

    <div id="sidebar">
    </div><!--ends sidebar-->

    <div id="footer">
    </div><!--ends footer-->

</div><!--ends wrapper-->

</body>

这里有CSS：

html{
    height:100%;
    background:url(images/green-bamboo2.jpg);
    background-attachment:fixed;
}

body{
    height:100%;
    width:80%;
    margin: 0 auto;
    padding:0;
    background:#FFFFFF;
}

#header, #navbar, #content, #sidebar, #footer{
    display:block;
}

#header{
    height:100px;
}

#navbar{
    height:50px;
    background:#CCCCCC;
}

#wrapper{
    min-height:100%;
    background:#FFFFFF;
    position:relative;
    overflow:auto;
}

#content{
    float:left;
    width:60%;
    height:auto;
    background:#99CC00;
}

#sidebar{
    float:right;
    width:40%;
    height:200px;
    background:#09F;
}

#footer{
    clear:both;
    height:150px;
    background:#339933;
    position:absolute;
    bottom:0;
    width:100%;
}

Answer 1

div上的高度设置为auto;这很好，但你的页脚div是绝对的，这意味着当另一个div开始重叠时它不会移动。如果你把它定位：相对那么它应该随着你的div变大而移动。

Answer 2

您的CSS中存在问题。

您在clear上同时使用position:absolute和#footer。因此，它不使用clear属性。

编辑：请参阅http://jsfiddle.net/WTpAx/1/，了解从position:absolute和#footer min-height:100%移除#content后的情况}}

浮动的div不会完全扩展

2 个答案: