帶頂部和底部邊距的拉伸div - css/css3

Question

我有一個divs如下的頁面;

<div id="container"> 
    <div id="header"></div> 
    <div id="content"> 
     <div id="wrap2"></div> 
     <div id="wrap"></div> 
    </div> 
    <div id="footer"></div> 
</div> 

我有wrap2特定的高度，我想wrap填寫下列wrap2區域，但高於footer。你可以看到小提琴here。我想在wrap2和footer之間拉伸wrap。我正在尋找一個純粹的CSS解決方案。

我該怎麼做？

Answer 1

我解決了它的設置padding-bottom: 31px;#content和100% height爲wrap。

你可以看到結果小提琴here

感謝@DA，@Jaspero和@Ima學生

Answer 2

你不能用純CSS。這也許是關於CSS的最大抱怨。最準確的選擇是使用JavaScript。在onload和onresize上調用一個JS函數，該函數抓取視口的高度，減去頁腳和頁眉的高度，然後設置div的高度以填充其餘部分。