CSS，垂直伸展直到達到其父母的高度

Question

包裹在pageWrapper容器中，我在一列中有3個div。首先（標題）和最後（navWrapper）具有固定的高度。我需要中間的一個（contentWrapper）高度拉伸，直到父div divWrapper達到最大高度（，根據瀏覽器的視口）。

我畫了這個問題的模式。

這是我目前的解決方案的小提琴。 http://jsfiddle.net/xp6tG/

和這裏的代碼

CSS和HTML

html, body{ 
 
    height: 100%; 
 
} 
 

 
body{ 
 
    background-color: #E3E3E3; 
 
} 
 

 
#pageWrapper{ 
 
    margin: 0 auto; 
 
    position: relative; 
 
    width: 600px; 
 
    height: 100%; 
 
} 
 

 
header{ 
 
    display:block; 
 
    width: 100%; 
 
    height: 100px; 
 
    background: yellow; 
 
} 
 

 
#contentWrapper{ 
 
    width: 100%; 
 
    height: 100%; 
 
    background: blue; 
 
} 
 

 
#navWrapper{ 
 
    width: 100%; 
 
    height: 100px; 
 
    background: green; 
 
}

<div id="pageWrapper"> 
 
    <header> 
 
    Header 
 
    </header> 
 
    <div id="contentWrapper"> 
 
    Content 
 
    </div> 
 
    <div id="navWrapper"> 
 
    Nav 
 
    </div> 
 
</div>

這幾乎是工作，但它會導致過高的高度，這將導致一個垂直滾動條出現。

Answer 1

這是一種做法。

應用以下CSS：由於您爲header和#navwrapper塊元素指定高度

html, body{ height: 100%; margin: 0;} 
body{ background-color: #e3e3e3;} 

#pagewrapper{ 
    margin: 0 auto; 
    position: relative; 
    width: 600px; 
    height: 100%; 
} 
header{ 
    display:block; 
    width: 100%; 
    height: 100px; 
    background: yellow; 
} 
#contentwrapper{ 
    width: 100%; 
    position: absolute; 
    top: 100px; 
    bottom: 100px; 
    left: 0; 
    background: blue; 
} 
#navwrapper{ 
    width: 100%; 
    position: absolute; 
    height: 100px; 
    bottom: 0px; 
    left: 0; 
    background: green; 
} 

， 可以使用絕對定位相對於所述母體#pagewrapper塊 設置在底部和頂部偏移量爲#contentwrapper，最低偏移量爲 #navwrapper。

如果看到滾動條，則可能需要爲html和/或body標籤設置margin: 0。

演示小提琴：http://jsfiddle.net/audetwebdesign/yUs6r/

Answer 2

您可以嘗試在你的部分添加此腳本你的CSS被調用後。它會找到你的頭/腳元素的高度，並使中心div的高度填滿屏幕。這很好，因爲如果你決定使頁眉/頁腳元素高度動態化，這個腳本仍然可以工作。

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
     var totalHeight = $('#pageWrapper').height(); 
     totalHeight -= $('header').height(); 
     totalHeight -= $('#navWrapper').height(); 

     // Remove an extra 20px for good measure 
     totalHeight -= 10; 

     $('#contentWrapper').css('height', 'auto'); 
     $('#contentWrapper').css('min-height', totalHeight); 
}); 
</script>