Div不位于绝对div下方

Question

我在http://jsfiddle.net/qPtXL/

处有以下代码

正如您所看到的问题是，如果#footer文字不长于#contents，则.body不会位于.sidebar下方。 .sidebar是绝对定位的，.body有一个余量，因此我不使用任何浮点数来保留.body宽度变量。

如果出现这种情况，是否有人建议如何#footer位于#contents以下？

Answer 1

通常，这很容易做到：http://jsfiddle.net/qPtXL/4/

parent: overflow: hidden
left: float: left
content: overflow: hidden

没有菜鸟的显示：table-cell等;）

绝对位置使元素远离流动。这就像是Photoshop中的新独立层。你唯一能做的就是设置它的位置和高度\宽度相对于最近的父位置：relative

IE6： http://jsfiddle.net/qPtXL/10/

Answer 2

您也可以通过在CSS中添加float元素来尝试。这是您的问题的浮动修复程序。我已从CSS中删除了一些属性并添加了一些属性。 以下是你的CSS。

#header, #footer { border: 1px solid red; padding: 10px; font-size: 20px; }
#contents { position: relative; background: url(../img/sidebar.gif) repeat-y; }
#contents .sidebar { width: 220px; padding: 20px; float:left}
#contents .body { padding: 20px 20px 20px 0; margin-left: 280px;  border: 1px solid green; }
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;}

您需要在HTML中添加“clearfix”类。

<div id="contents" class="clearfix">

谢谢你， 拉梅什