使div填充剩余屏幕空间的高度

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

当前回答

这是动态计算重新分配屏幕空间，最好使用Javascript。

您可以使用CSS-IN-JS技术，如下面的lib：

https://github.com/cssobj/cssobj

演示：https://cssobj.github.io/cssobj-demo/

2016-10-13 02:28:18

其他回答

我也一直在寻找答案。如果您有幸能够以IE8及更高版本为目标，那么可以使用display:table和相关值来获取包含div在内的块级元素的表的呈现规则。

如果你更幸运，并且你的用户正在使用顶级浏览器（例如，如果这是你控制的计算机上的intranet应用程序，就像我的最新项目一样），你可以在CSS3中使用新的Flexible Box Layout！

2011-04-11 15:48:06

你可以简单地使用vh来表示CSS中的视图高度吗。。。

查看下面我为您创建的代码片段并运行它：

正文{填充：0；边距：0；}.全高{宽度：100px；高度：100vh；背景：红色；}<div class=“full-height”></div>

此外，请看下面我为您创建的图像：

2017-06-17 18:19:17

这是动态计算重新分配屏幕空间，最好使用Javascript。

您可以使用CSS-IN-JS技术，如下面的lib：

https://github.com/cssobj/cssobj

演示：https://cssobj.github.io/cssobj-demo/

2016-10-13 02:28:18

对我来说，最简单的方法就是使用网格。但是，我正在寻找一种更简单的方法。下面是我是如何做到这一点的。但是，如果我们有很多嵌套的div，那就太痛苦了。

 <div style={{
  display:grid,
  gridTemplateRows:'max-content 1fr',
}}>
   <div>
     Header
   </div>
   <div style={{height:'100%',minHeight:'0'}}>
     Content
   </div>
 </div>

2022-11-03 14:00:36

为什么不这样呢？

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（按顺序）一个高度，然后给元素一个高度？

为我工作

2012-02-20 09:21:45

使div填充剩余屏幕空间的高度

推荐文章

最新文章

标签