如何将 div 始终放在具有动态内容的绝对位置 div 下方

Question

我有这些布局：

<div id='wrapper'>
    <div id="contentwrap">
         <div id='content'></div>
         <div id='lhs'></div>
         <div id='rhs'></div>
    </div>
    <div id='footer'></div>
</div>

和 CSS：

#content {
    margin: 0 300px auto 180px !important;
    position: absolute;
    top: 142px;
}    

#wrapper {
    margin: 0 auto;
}
#lhs {
    float: left;
    width: 170px;
}
#rhs {
    float: right;
    width: 300px;
    margin-left: -300px;
    margin-right: 10px;
}

#footer {
    clear: both;
    width: 100%;
}

只有一个要求：#content 必须是 [contentwrap] 中的第一个元素。

它的高度是动态的。

现在当它的高度增加时我遇到了问题：内容将与我的#footer 重叠。

如何确保“#footer”始终出现在“#content”下方并且没有发生重叠？

P/S：抱歉，图片太小了，imgur 做到了！

Answer 1

更新内容后自动推送页脚：

<style>
#content {
    margin: 0 300px auto 180px !important;
    position: absolute;
    top: 142px;
    background-color:red;
}    

#wrapper {
    margin: 0 auto;
}

#footer{
    position:absolute;
}
</style>

<div id='wrapper'>
    <div id="contentwrap">
         <div id='content'>
             Example Text<br>
             Two Lines
         </div>
         <div id='lhs'></div>
         <div id='rhs'></div>
    </div>
    <div id="footer">The is the Footer</div>
</div>
<script>
function updateFooter(){
footer=document.getElementById('footer');
content=document.getElementById('content');
contentBottom=content.offsetTop+content.offsetHeight;
footer.style.position='absolute';
footer.style.top=contentBottom + 'px'
}
window.setInterval(updateFooter,100)
</script>

Answer 2

好的，所以这使用了一种技术，其中所有 3 列都向左浮动，以便它们彼此相邻堆叠，并且使用负的左边距将左侧列拉回视图。

我没有对此进行广泛测试（仅 Firefox 18 / Windows7），因此它可能无法在所有浏览器/操作系统组合上运行：

#wrapper {
    margin: 0 auto;
    width: 100%;
}

#contentwrap {
    float: left;
    width: 100%;
}

#content {
    margin: 0 300px auto 170px !important;
}    

#lhs {
    float: left;
    width: 170px;
    margin-left: -100%;
}

#rhs {
    float: left;
    width: 300px;
    margin-left: -300px;
    margin-right: 0px;
}

#footer {
    clear: left;
    width: 100%;
}

Answer 3

总有办法。但这并不意味着它是正确/安全的方式。这个例子只是一个演示，我鼓励你修改你的 html 并且不使用这个技术。使用

<div id='lhs'></div>
<div id='content'></div>
<div id='rhs'></div>

还有float: left;

此示例使用 css3 中的 calc() 函数，因此它可能不适用于旧版浏览器。虽然这是有效的并且是响应式的（将根据页面宽度改变宽度），但您应该修改您的 html，因为我认为没有理由说明为什么“内容”必须排在第一位。

Fiddle

Answer 4

您可以在#content div 上使用样式max-height

或在页脚和内容之间放置一个空 div，如下所示：

<div id='wrapper'>
    <div id="contentwrap">
         <div id='content'></div>
         <div id='lhs'></div>
         <div id='rhs'></div>
    </div>
    <div style="clear:both;height:0px;overflow:hidden;"></div>
    <div id='footer'></div>
</div>