填充剩余的div高度

Question

我對某些人有些簡單 ，但現在一段時間無法解決問題。

我有粘貼的問題在這里上的jsfiddle。

我想讓div[id='content']填寫剩余的高度。 我已經按照CSS的一些有關display: table和display:table-row教程進行了學習，但我無法在我的作品上使用它。

在此先感謝您的幫助。

Answer 1

您需要添加：

html{
    height:100%;
}

演示小提琴

這為您的viewport了一個尺寸，可以根據該尺寸計算分配給主體的100％，否則實際上是100％ 一無所有 。 您可能還需要為body的身高值增加%

Answer 2

添加：

html, body, html > body, html body {
    height:100%;
    min-height:100%;
}

許多表達式適用於所有瀏覽器，例如IE等都是html {高度：100％; }

小提琴

Answer 3

使用固定位置嘗試此CSS

body {

    margin: 0px;
    width: 100%;
    height: 100%;
    background: red;
}
#nav {

    height: 25px;
    background: blue;
}
#content {

    height: 100%;
    background: green;
    position: fixed;
    bottom: 0px;
    top: 25px;
    width: 100%;
}

Answer 4

使用CSS的min-height屬性。我通常使用Java腳本screen.height-標頭高度-頁腳高度來設置此屬性。

問候

亞當