Question

我基本上在网页中有三个部分（div）。

标题
内容
页脚

所有三个div都有绝对的位置。问题是当内容div具有更多文本并且高度增加时，它在页脚div上重叠（在小屏幕设备中造成更多问题）。我希望页脚div根据内容div的高度向下移动。

如何在不删除标题和内容div的绝对位置的情况下执行此操作？ div的当前样式如下：

.header{
position:absolute;
top: 0px;
left: 40px;}

.content{float:left;
margin:40px;
position:absolute;
top:200px;
max-width:600px;
z-index:9999;
-webkit-font-smoothing:antialiased;}

.footer{height:auto;
left:40px;
position:absolute;
width:20%;
z-index:1000}

请帮忙。谢谢。

Answer 1

我不完全确定您要执行的操作，但您最有可能需要从内容部分删除position: absolute;。我设置了一个快速的JSFiddle来演示我将使用的技术：

http://jsfiddle.net/TrnLm/

HTML：

<header></header>
<article>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pharetra iaculis quam, in porttitor risus imperdiet id. Proin molestie libero eu mi hendrerit semper ac ac sem. Sed risus mauris, scelerisque nec nisi ut, auctor elementum neque. Donec eget risus ultricies sem lobortis viverra non eget justo. Aenean laoreet tellus non sapien tincidunt, nec egestas diam aliquet. Maecenas a tincidunt arcu. Phasellus egestas quam tortor, semper dignissim massa commodo sed. Aliquam erat volutpat. Fusce sed diam suscipit, ornare lacus ac, vulputate lacus. Curabitur imperdiet felis vitae ipsum rutrum sagittis.</p>
    <p>Pellentesque non bibendum nisi. Donec pulvinar diam mattis, cursus ipsum tempus, commodo sapien. Sed id suscipit massa. Proin eu tincidunt urna. Ut ultricies hendrerit mollis. Mauris sollicitudin tincidunt augue vitae tincidunt. Maecenas aliquam fermentum varius. Aenean nec velit venenatis, gravida massa nec, semper velit. Etiam sagittis magna at lorem fermentum pulvinar.</p>
    <p>Nunc tristique posuere velit. Quisque sodales diam nunc. Nam rhoncus magna a purus laoreet, sagittis volutpat felis volutpat. Fusce sagittis aliquet diam, vitae semper velit hendrerit ut. Nullam odio lacus, ultrices ut dui ut, consectetur eleifend quam. Mauris eget bibendum enim, sed fringilla nulla. Phasellus auctor metus quis pulvinar scelerisque. Curabitur at mi at lacus imperdiet eleifend vitae at turpis. Nam bibendum lacinia fermentum. Duis vel nisi risus. Vivamus felis neque, bibendum nec lobortis nec, congue in odio. Vestibulum dignissim vestibulum nisi, in scelerisque nibh feugiat vitae. Suspendisse eleifend rutrum feugiat. Suspendisse eu diam nec mauris aliquet posuere nec et quam.</p>
    <p>Ut placerat tellus at orci egestas, eget viverra lectus tempor. Pellentesque ultrices tellus ut massa dignissim sagittis. Ut vestibulum diam id odio luctus molestie. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse quis felis et tortor mattis tincidunt. Suspendisse potenti. Etiam dictum in sapien id consectetur. Vivamus nec erat facilisis arcu euismod consequat.</p>
    <p>Suspendisse potenti. Aliquam erat volutpat. Integer et sem vitae risus ornare elementum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec id nisi posuere lacus dignissim placerat. Cras id velit eros. Donec tincidunt nunc ac tempor eleifend. Aliquam ut imperdiet diam, eu imperdiet leo. Maecenas dapibus metus justo, non facilisis tellus ultricies in. Ut nec tempor neque. Nam sit amet quam ut risus blandit malesuada at ut metus. Integer nec massa vel nibh vestibulum molestie.</p>
</article>
<footer></footer>

CSS：

html {
    height: 100%;
}
body {
    margin: 0;
    min-height: 100%;
    position: relative;
    padding: 50px 0;
}
header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: red;
}
article {
    padding: 25px;
}
footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: red;
}

这方面的关键组成部分是：

正文有顶部和底部填充，以说明页眉和页脚的大小。
页眉和页脚绝对定位。
内容不绝对定位。

希望这有帮助。

Answer 2

我建议您将位置更改为静态。

具有绝对定位的元素不受其他元素的影响，并且不会影响其他元素。因此，在您的情况下，您将必须删除位置：绝对，如果您希望页脚根据内容的位置移动。

CSS有助于修复溢出div

2 个答案: