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

当前回答

对于移动应用程序，我只使用VH和VW

<div class="container">
    <div class="title">Title</div>
    <div class="content">Content</div>
    <div class="footer">Footer</div>
</div>

.container {
    width: 100vw;
    height: 100vh;
    font-size: 5vh;
}
    
.title {
    height: 20vh;
    background-color: red;
}
    
.content {
    height: 60vh;
    background: blue;
}
    
.footer {
    height: 20vh;
    background: green;
}

演示-https://jsfiddle.net/u763ck92/

2017-02-01 15:59:23

其他回答

我为此纠结了一段时间，最后得出了以下结论：

由于很容易使内容DIV与父对象的高度相同，但显然很难使其为父对象高度减去标头高度，因此我决定使内容DIF为全高度，但将其绝对放置在左上角，然后为顶部定义一个填充，该填充具有标头的高度。这样，内容会整齐地显示在标题下，并填充整个剩余空间：

body {
    padding: 0;
    margin: 0;
    height: 100%;
    overflow: hidden;
}

#header {
    position: absolute;
    top: 0;
    left: 0;
    height: 50px;
}

#content {
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 50px;
    height: 100%;
}

2011-06-20 09:36:23

在CSS中，确实没有一种可靠的跨浏览器方式来实现这一点。假设您的布局很复杂，您需要使用JavaScript来设置元素的高度。你需要做的本质是：

Element Height = Viewport height - element.offset.top - desired bottom margin

一旦您可以获得该值并设置元素的高度，就需要将事件处理程序附加到窗口onload和onresize，以便可以启动调整大小函数。

此外，假设内容可能大于视口，则需要将overflow-y设置为滚动。

2008-09-18 08:16:50

使用flexbox的简单解决方案：

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

Codepen示例

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

2015-02-27 18:21:05

这是我自己的Pebbl解决方案的最小版本。花了很长时间才找到在IE11中发挥作用的诀窍。（也在Chrome、Firefox、Edge和Safari中进行了测试。）

html格式{高度：100%；}正文{高度：100%；边距：0；}部分{显示：柔性；弯曲方向：柱；高度：100%；}div：第一个孩子{背景：金色；}div：最后一个子级{背景：李子；挠曲生长：1；}<body><章节><div>FIT</div>增长</div></section></body>

2020-04-14 21:12:21

它从未像NICCAI在第一个答案中建议的那样，以其他方式对我起作用。我正在使用这种方法用谷歌地图重新缩放＜div＞。

以下是如何做到这一点的完整示例（适用于Safari/FireFox/IE/iPhone/Androrid（适用于旋转））：

CSS

body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.header {
  height: 100px;
  background-color: red;
}

.content {
  height: 100%;
  background-color: green;
}

function resize() {
  // Get elements and necessary element heights
  var contentDiv = document.getElementById("contentId");
  var headerDiv = document.getElementById("headerId");
  var headerHeight = headerDiv.offsetHeight;

  // Get view height
  var viewportHeight = document.getElementsByTagName('body')[0].clientHeight;

  // Compute the content height - we want to fill the whole remaining area
  // in browser window
  contentDiv.style.height = viewportHeight - headerHeight;
}

window.onload = resize;
window.onresize = resize;

HTML

<body>
  <div class="header" id="headerId">Hello</div>
  <div class="content" id="contentId"></div>
</body>

2011-08-06 03:30:33

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

推荐文章

最新文章

标签