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%;
}

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

它的高度是动态的。

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

My current layout 如何确保'#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和 NOT 使用这种技术。使用

<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>

如何将div总是置于具有动态内容的绝对位置div之下

4 个答案: