Question

我有一些简单，但我现在无法解决问题。

我在JSFiddle上粘贴了here问题。

我想让div[id='content']填写剩余的高度。我已经关注了关于display: table和display:table-row的CSS的一些教程，但是我无法在我的网站上使用它。

先谢谢你，我会帮助你。

Answer 1

您需要添加：

html{
    height:100%;
}

Demo Fiddle

这为您的viewport提供了可以计算100％分配给正文的大小，否则它实际上是 nothing 的100％。您可能还想在%

的高度值中添加body

Answer 2

添加：

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

许多表达式适用于所有浏览器，IE等有点儿只有html {height：100％; }

fiddle

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 - header height - footer height ..

此致

亚当

填充剩余的div高度

4 个答案:

Demo Fiddle