我正在开发一个web应用程序,我希望内容能够填满整个屏幕的高度。

该页面有一个标题,其中包含徽标和帐户信息。这可以是任意高度。我希望contentdiv将页面的其余部分填充到底。

我有一个header div和一个content div。目前,我正在为布局使用一个表,如下所示:

CSS和HTML

#第页{高度:100%;宽度:100%}#td含量{高度:100%;}#内容{溢出:自动;/*或溢出:隐藏*/}<table id=“page”><tr><td id=“tdheader”><div id=“header”></分区></td></tr><tr><td id=“tdcontent”><div id=“content”></分区></td></tr></table>

页面的整个高度已填充,不需要滚动。

对于contentdiv中的任何内容,设置top:0;会把它放在标题下面。有时内容将是一个真实的表格,其高度设置为100%。将标题放在内容内不允许这样做。

有没有一种方法不使用桌子就能达到同样的效果?

更新:

contentdiv中的元素也将高度设置为百分比。因此,div中100%的内容将填充到底部。50%的两个元素也是如此。

更新2:

例如,如果标题占屏幕高度的20%,则在#内容内部指定50%的表将占屏幕空间的40%。到目前为止,把整个东西包在桌子里是唯一有效的方法。


当前回答

使用flexbox的简单解决方案:

html,正文{高度:100%;}正文{显示:柔性;弯曲方向:柱;}.内容{挠曲生长:1;}<body><div>标题</div><div class=“content”></div></body>

Codepen示例

另一种解决方案,在content div中以div为中心

其他回答

为什么不这样呢?

html, body {
    height: 100%;
}

#containerInput {
    background-image: url('../img/edit_bg.jpg');
    height: 40%;
}

#containerControl {
    background-image: url('../img/control_bg.jpg');
    height: 60%;
}

给html和body(按顺序)一个高度,然后给元素一个高度?

为我工作

CSS3简单方法

height: calc(100% - 10px); // 10px is height of your first div...

现在所有主流浏览器都支持它,所以如果您不需要支持老式浏览器,请继续。

免责声明:公认的答案给出了解决方案的想法,但我发现它有点臃肿,因为不必要的包装和css规则。下面是一个只有很少css规则的解决方案。

HTML 5

<body>
    <header>Header with an arbitrary height</header>
    <main>
        This container will grow so as to take the remaining height
    </main>
</body>

CSS

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;       /* body takes whole viewport's height */
}

main {
  flex: 1;                 /* this will make the container take the free space */
}

上面的解决方案使用视口单元和flexbox,因此是IE10+,前提是您使用IE10的旧语法。

要使用的代码笔:指向代码笔的链接

或者这一个,对于那些需要主容器在内容溢出时可滚动的人:链接到codepen

编造外星人先生的想法。。。

这似乎是一个比支持CSS3的浏览器流行的灵活盒更干净的解决方案。

只需将min-height(而不是height)与calc()一起用于内容块。

calc()以100%开始,并减去页眉和页脚的高度(需要包含填充值)

使用“min-height”而不是“height”特别有用,因此它可以处理javascript渲染的内容和Angular2等JS框架。否则,一旦javascript呈现的内容可见,计算将不会将页脚推到页面底部。

这里是一个页眉和页脚的简单示例,两者都使用50px高度和20px填充。

Html:

<body>
    <header></header>
    <div class="content"></div>
    <footer></footer>
</body>

Css:

.content {
    min-height: calc(100% - (50px + 20px + 20px + 50px + 20px + 20px));
}

当然,数学可以简化,但你明白了。。。

对我有效的方法(在另一个div中包含一个div,我假设在所有其他情况下)是将底部填充设置为100%。也就是说,将其添加到css/样式表中:

padding-bottom: 100%;