如何讓兄弟div動態填充父項？

我基本上有一些兄弟divs，標題，內容，頁腳。我希望內容在窗口大小調整時動態地填充頁眉和頁腳左側的父空間。如何讓兄弟div動態填充父項？

我試過使用身高：100％在所有或其中一些，並始終使元素太高。我不想要一個滾動條。這可以用CSS來完成，還是必須使用Jquery？

HTML

<html class="fill"> 
    <body class="fill"> 
     <div>header</div> 
     <div class="content">content</div> 
     <div>footer</div> 
    </body> 
</html>

CSS

.fill 
{ 
    height:100%; 
} 
.content 
{ 
    height:100%; 
}

來源

2012-09-19 Tim

分100％到3部分構成。標題20％頁腳20％，內容60％。 –

@ Siamak.A.M我只希望內容是動態的，而不是頁眉和頁腳。 – Tim

查看我的回答:)希望能幫到 –

如果你有固定的頁眉和頁腳的高度，你可以通過設置頂部和底部上的內容做這個div即

<style type="text/css"> 
html, body{width: 100%; height: 100%; margin: 0; padding: 0} 
.header{position: absolute; top: 0; width: 100%; height: 100px; background: #888} 
.content{position: absolute; width: 100%; top: 100px; bottom: 100px} 
.footer{position: absolute; bottom: 0; width: 100%; height: 100px; background: #888} 
</style>

來源

2012-09-19 15:40:05 robC

你的頁腳正好在頁眉下。 http://jsfiddle.net/W5k7r/ – Tim

這不是你想要的佈局嗎？也許你沒有改變你的HTML到這些類？ http://jsfiddle.net/W5k7r/1/ – robC

哦對不起，沒有。這看起來不錯！我會嘗試整合它。 – Tim

這是正確的，盒子的高度是容器的100％，但是你也必須考慮到你的帳戶邊界，還有那裏的頁腳。

所以總高度爲：容器+邊界的總和+高度頁腳的

高度。

這將強制一個滾動條。

來源

2012-09-19 15:35:18 Andrew

有許多方法來模擬這種效果，每一個妥協。

1st。固定頁眉，頁腳和頂部和底部：jsFiddle 妥協，元素的大小是固定的，因此設計是剛性的，而不是內容驅動的。可以在未來變得更加艱難，因爲一切都被絕對定位。

2nd。百分比比例：jsFiddle 妥協，一切規模 - 而不僅僅是內容區域。這意味着屏幕越大，頁眉和頁腳就越大。

3rd。混合搭配，修復固定的東西，讓靈活的東西需要靈活：jsFiddle 妥協，雖然更靈活，但涉及隱藏可能難以管理的內容。

絕對不想使用這些方法中的任何一種。看看你的內容並混合將給你的內容最大的空間和最好的外觀的方法。隨着時間的推移，像calc()這樣的CSS屬性會使這個更容易，但瀏覽器需要先到達那裏。

如果您需要限制您的頁眉和頁腳變得太大，我會推薦查看選項二，因爲它最靈活，並實現最小和最大高度。（jsFiddle）

來源

2012-09-19 16:10:11 Dpolehonski

這是工作：
頁眉和頁腳基於像素和基於百分比的內容。
page.html中

<style> 
.header 
{ 
    background-color:#222; 
    padding:5px; 
    position: absolute; 
    top: 0px; 
    left:0px; 
    right:0px; 
    height:100px; 
} 
.content 
{ 
    background-color:#CCC; 
    padding:5px; 
    position: absolute; 
    top: 100px; 
    bottom: 50px; 
    left:0px; 
    right:0px; 
} 
.footer 
{ 
    position:absolute; 
    bottom: 0px; 
    border:1px; 
    height:50px; 
    background-color:#09F; 
    left:0px; 
    right:0px; 
} 

</style> 
<div class="header">1</div> 
<div class="content">2</div> 
<div class="footer">3</div>

來源

2012-09-19 16:37:07

如何讓兄弟div動態填充父項？

回答

相關問題