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

我建議你將位置改爲靜態。

具有絕對定位的元素不受其他元素的影響，並且不影響其他元素。因此，對於您的情況，如果您希望頁腳根據內容的位置移動，則必須刪除該位置：絕對位置。