1

我正在尝试设计一个带有两个浮动的页面布局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%;
}
4

2 回答 2

1

您在 div 上的高度设置为自动；这很好，但是您的页脚 div 是绝对定位的，这意味着当另一个 div 开始重叠时它不会移动。如果你让它 position: relative 那么它应该随着你的 div 变大而移动。

于 2012-05-10T21:09:41.670 回答
0

你的css有问题。

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

编辑：请参阅http://jsfiddle.net/WTpAx/1/以查看如果position:absolute从.#footermin-height:100%#content

于 2012-05-10T21:10:13.593 回答