我正在开发一个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%。到目前为止,把整个东西包在桌子里是唯一有效的方法。


当前回答

为什么不这样呢?

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(按顺序)一个高度,然后给元素一个高度?

为我工作

其他回答

如果在父div上使用display:flex,您所要做的就是简单地设置高度以进行拉伸或填充

.divName {
    height: stretch
}

现在有很多答案,但我发现使用高度:100vh;处理需要填满整个可用垂直空间的div元素。

这样,我就不需要到处玩显示或定位了。这在使用Bootstrap制作一个仪表板时非常有用,其中我有一个侧边栏和一个主工具栏。我想让主体拉伸并填充整个垂直空间,以便我可以应用背景色。

div {
    height: 100vh;
}

支持IE9及以上版本:点击查看链接

使用flexbox的简单解决方案:

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

Codepen示例

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

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

这似乎是一个比支持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));
}

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

在Bootstrap中:

CSS样式:

html, body {
    height: 100%;
}

1) 只需填充剩余屏幕空间的高度:

<body class="d-flex flex-column">
  <div class="d-flex flex-column flex-grow-1">

    <header>Header</header>
    <div>Content</div>
    <footer class="mt-auto">Footer</footer>

  </div>
</body>


2) 填充剩余屏幕空间的高度,并将内容与父元素的中间对齐:

<body class="d-flex flex-column">
  <div class="d-flex flex-column flex-grow-1">

    <header>Header</header>
    <div class="d-flex flex-column flex-grow-1 justify-content-center">Content</div>
    <footer class="mt-auto">Footer</footer>

  </div>
</body>