Question

我有以下HTML：

<div id="contents">
    <div id="inner">Inner Div</div>
</div> 

<div id="footer">Footer</div>

应用以下CSS：

#contents {
    position: relative;
}

#inner {
    position: absolute;
    background-color: green;
    width: 100%;
}

#footer {
    background-color: red;
}

问题是#footer在#contents下崩溃了。您也可以在jsfiddle上查看http://jsfiddle.net/MAhmadZ/YkJMH/1/

注意：这只是较大页面的摘要。我别无选择，只能使用position属性。我在div内有多个#contents所有绝对位置，一次只显示1个。我无法确定身高

Answer 1

#contents元素在通过绝对定位从流程中取出后为空，因此它的高度为零，因此#inner在其下方崩溃。

如果你给#footer一个高度或一些垂直填充，它应该阻止#contents在你绝对定位的元素下滑动。

Answer 2

这应该解决它：

#contents {
    position: relative;
}

#inner {
    position: absolute;
    background-color: green;
    width: 100%;
}

#footer {
    background-color: red;
    position: absolute;
    width: 100%;
    bottom: 0;
}

您的问题是#inner绝对定位。这使得HTML布局的 STATIC 格式不可见。

Answer 3

不太确定要实现的目标，但您可以将页脚设置为使用位置：固定和底部：0px以将其保留在页面底部。

Answer 4

我自己想出了以下解决方案：

#footer:before {
    content: '.';
    display: block;
    width: 100%;
}

立即查看：http://jsfiddle.net/MAhmadZ/YkJMH/5/

具有绝对定位的孩子的相对定位的父母折叠了后面的元素

4 个答案: