內部div填充屏幕的其餘部分（受包裝頁邊距和填充限制）

我需要內容div來「填充」標題後剩餘的屏幕剩餘部分。我想保留包裝填充&保證金。使用絕對位置不起作用，因爲內容div停止在視覺上嵌套在包裝中。（如果絕對必要，header div可以是一個固定的高度，但我更喜歡它是動態的。）非常感謝。內部div填充屏幕的其餘部分（受包裝頁邊距和填充限制）

* { 
    margin:0px; 
    padding:0px; 
} 

html, 
body { 
height: 100%; 
} 


#wrapper { 
    background-color:#eee; 
    margin:20px; padding:20px; 
    border: solid 1px #333; 
} 

#header { 

} 

#content { 
    background-color:red; 
}

。

<body> 
<div id="wrapper"> 
    <div id="header">header</div> 
    <div id="content">content</div> 

</div> 

</body>

小提琴這裏： http://jsfiddle.net/jHLhK/

來源

2012-05-30 Mike Thrussell

指定寬度和高度設置爲100%到您的內容股利。

#content { 
    background-color:red; 
    width:100%; 
    height:100%; 
}

該100%意味着它會像它有周圍元素的空間一樣多。

或者您可能只想要height或只有width根據您的要求爲100%。

來源

2012-05-30 14:40:55 Sarfraz

這不會造成視覺上的變化。在示例代碼中，我希望頁面的其餘部分在標題後填充紅色。 –

內部div填充屏幕的其餘部分（受包裝頁邊距和填充限制）

回答

相關問題