讓一個div堅守父

我想在這裏創造一個佈局看起來像下面的底部：這是the fiddle 讓一個div堅守父

<body> 
    <div class="wrapper"> 
     <div class="header"> 
      Header 
     </div> 
     <div class="content"> 
      This is the content section 
     </div> 
     <div class="stream-content"> 
       This is the stream content. 
     </div> 
     <div class="push"> 
     </div> 
    </div> 
    <div class="footer"> 
    </div> 
<body>

我想content section採取了header和footer之間的充分空間部分。還有一個名爲[stream-content]的部分，如果有（僅在主頁上）必須位於footer之前。在這種情況下，content部分應該佔用header和stream-content部分之間的所有空間。我試圖用絕對定位來做同樣的事情，但是我所有的元素都會出現故障，所以想要了解這樣做的正確方法。預先感謝所有幫助！

來源

2013-12-09 user1240679

你總是可以用百分比來表示div的高度。標題5％，正文90％，頁腳5％。我不確定百分比是否被忽視，但它應該起作用。 –

[這可能有助於]（http://jsfiddle.net/peteng/9DLeg/） - 只需將內容和流內容放入中間部分 – Pete

將position:relative加入你的包裝類。將position:absolute;bottom:0;添加到流內容類。

在此處查看。 Fiddle

來源

2013-12-09 15:57:34

嘿感謝您的回覆。但是我注意到，當我在「內容」部分添加了很多內容時，我認爲很粘的紅色頁腳也正在下降。我已經讓這個粘性頁腳在這裏查看css-tricks http://css-tricks.com/snippets/css/sticky-footer/，但它現在看起來更長時間了。我在這裏錯過了什麼嗎？會很好，得到一些幫助。 – user1240679

所以你想要它堅持到瀏覽器的底部或包裝的底部？ –

這與包裝無關。「固定」位置相對於屏幕的視口而不是元素的父視口。 –

如果我理解正確，那麼一種方法是將[steam content]放在包裝外面，因爲包裝將頁腳保留在底部。如果你的包裝內必須有[蒸汽含量]，那麼你可以嘗試像這樣的http://ryanfait.com/sticky-footer/以將其與底部一起保持在底部

來源

2013-12-09 15:49:21 user3034378

鏈接斷開。我會嘗試找到一個存檔版本，但它的robots.txt不允許索引。 – carefulnow1

讓一個div堅守父

回答

相關問題