CSS帮助修复溢出div

Question

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

1. 头
2. 内容
3. 页脚

这三个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

我建议你将位置改为静态。

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