如何使屏幕上的剩餘空間的div全高

Question

我最近發佈了我的新網站，但在更大的分辨率顯示器上顯示我的第二個內容div，它位於我的導航欄下，一小段文字只擴展到其中的內容很好，除了一頁內容很少，意味着頁面頁腳和頁腳之間有一個大的白色部分。

這裏有一個演示：http://jsfiddle.net/XUuVL/

我不知道我怎麼可能讓這個灰色地帶將填補這一空白離開它下面。

乾杯。

html,body 
{ 
    background: #FFFFFF; 
    font: 0.74em Arial; 
    height: 100%; 
} 

#wrapper 
{ 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto 0; 
} 

#content 
{ 
    width: 90%; 
    min-width: 1000px; 
    height: 100%; 
    padding: 20px 5% 20px 5%; 
    padding-bottom: 30px; 
    margin-left: auto; 
    margin-right: auto; 
} 

#content2 
{ 
    width: 90%; 
    min-width: 1000px; 
    height: auto; 
    min-height: 100%; 
    padding: 60px 5% 20px 5%; 
    background: #808080; 
    overflow: hidden; 
} 

Answer 1

在這種情況下，由於body和#wrapper有100％的高度，你不能在百分比子元素給予高度。如果你給出固定高度，即以百分比表示的高度，它將起作用#wrapper。

您可以給灰色body，並給予白色#content。

Answer 2

添加位置：絕對在你的內容2 ...我希望你會想這樣的...

#content2 
    { 
     position:absolute; 
     width: 90%; 
     min-width: 1000px; 
     height: auto; 
     min-height: 100%; 
     padding: 60px 5% 20px 5%; 
     background: #808080; 
     overflow: hidden; 
    } 

Answer 3

檢查了這一點：http://jsfiddle.net/XUuVL/2/ 。 使用position: absolute;和bottom: 0;解決您的問題

Answer 4

，您可以給wrapper元素相同background和底部box-shadow作爲content2。然後它會看起來像content2延伸到底部。此外，還必須給它同樣width

#wrapper { 
    width: 90%; 
    min-width: 1000px; 
    background: #808080; 
    -moz-box-shadow: inset 0 -8px 8px -8px #000000; 
    -webkit-box-shadow: inset 0 -8px 8px -8px #000000; 
    box-shadow: inset 0 -8px 8px -8px #000000; 
} 

現在您從content2底部box-shadow，給一個白色背景的content元素

#content { 
    background: #FFFFFF; 
} 

#content2 { 
    -moz-box-shadow: inset 0 8px 8px -8px #000000; 
    -webkit-box-shadow: inset 0 8px 8px -8px #000000; 
    box-shadow: inset 0 8px 8px -8px #000000; 
} 

瞭解改JSFiddle