填充剩余的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-标头高度-页脚高度来设置此属性。

问候

亚当