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

当前回答

它从未像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

其他回答

对于移动应用程序，我只使用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

我的方法使用CSS中的calc（）函数。它计算页面上已知大小的项目时剩余的空间。

#固定尺寸{高度：2rem；背景色：红色；}#剩余填充量{背景色：蓝色；高度：计算值（100vh-2rem）；}＜div＞<div id=“fixed size”>已知大小</div><div id=“fill remaining”>填充剩余</div></div>

2023-01-15 02:03:30

文森特，我会用你的新要求再次回答。因为你不在乎内容太长会被隐藏，所以你不需要浮动标题。只需将溢出隐藏在html和body标签上，并将#content-height设置为100%。内容将始终比视口长页眉的高度，但它将被隐藏，不会导致滚动条。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Test</title>
    <style type="text/css">
    body, html {
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
      color: #FFF;
    }
    p {
      margin: 0;
    }

    #header {
      background: red;
    }

    #content {
      position: relative;
      height: 100%;
      background: blue;
    }

    #content #positioned {
      position: absolute;
      top: 0;
      right: 0;
    }
  </style>
</head>

<body>
  <div id="header">
    Header
    <p>Header stuff</p>
  </div>

  <div id="content">
    Content
    <p>Content stuff</p>
    <div id="positioned">Positioned Content</div>
  </div>

</body>
</html>

2008-09-18 17:52:16

如果您可以处理不支持旧浏览器（即MSIE 9或更旧版本）的问题，您可以使用已经是W3C CR的Flexible Box Layout Module来完成此操作。该模块还允许其他不错的技巧，例如重新排序内容。

不幸的是，MSIE 9或更低版本不支持此功能，您必须为除Firefox之外的所有浏览器的CSS属性使用供应商前缀。希望其他供应商也很快放弃前缀。

另一种选择是CSS网格布局，但稳定版本的浏览器对它的支持甚至更少。实际上，只有MSIE10支持这一点。

2020年更新：所有现代浏览器都支持display:flex和display:grid。唯一缺少的是对子网格的支持，只有Firefox才支持。请注意，MSIE不支持规范中的任何一个，但如果您愿意添加MSIE特定的CSS黑客，则可以使其行为正常。我建议干脆忽略MSIE，因为即使是微软也表示不应该再使用它了。Microsoft Edge很好地支持这些功能（除了子网格支持，因为它与Chrome共享Blink渲染引擎）。

使用显示的示例：网格：

html，正文{最小高度：100vh；填充：0；边距：0；}身体{显示：栅格；网格：“myheader”自动“mymain”最小值（0,1fr）“myfooter”自动/最小最大值（10rem，90rem）；}头球{网格区域：myheader；背景：黄色；}主要的{网格区域：mymain；背景：粉色；对齐自身：居中/*或拉伸+显示：柔性；+弯曲方向：柱；+对齐内容：中心*/}页脚{网格区域：myfooter；背景：青色；}<header>标题内容</header><main>应居中的主要内容，内容长度可能会更改。<details><summary>可折叠内容</summary><p>下面是一些文本，可以使用更多的垂直空间</p＞<p>下面是一些文字，可以使用更多的垂直空间（2）</p＞<p>下面是一些文字，可以使用更多的垂直空间（3）</p＞<p>下面是一些文字，可以使用更多的垂直空间（4）</p＞<p>下面是一些文字，可以使用更多的垂直空间（5）</p＞</details></main><footer>页脚内容</footer>

使用display的示例：flex：

html，正文{最小高度：100vh；填充：0；边距：0；}身体{显示：柔性；}主要的{背景：粉色；对齐自身：中心；}<main>应居中的主要内容，内容长度可能会更改。<details><summary>可折叠内容</summary><p>下面是一些文本，可以使用更多的垂直空间</p＞<p>下面是一些文字，可以使用更多的垂直空间（2）</p＞<p>下面是一些文字，可以使用更多的垂直空间（3）</p＞<p>下面是一些文字，可以使用更多的垂直空间（4）</p＞<p>下面是一些文字，可以使用更多的垂直空间（5）</p＞</details></main>

2013-05-03 10:55:31

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

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

div {
    height: 100vh;
}

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

2015-10-30 15:39:16

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

推荐文章

最新文章

标签