html - 相对定位的父级和绝对定位的子级会折叠后面的元素

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高度或一些垂直填充，它应该防止#footer在绝对定位的元素下方滑动。

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

不太确定您想要实现什么，但您可以将页脚设置为使用 position: fixed 和 bottom: 0px 以将其保持在页面底部。

Answer 4

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

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

现场查看：http: //jsfiddle.net/MAhmadZ/YkJMH/5/