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

当前回答

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

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

2023-01-15 02:03:30

其他回答

当内容太高时，需要底部div滚动时，发布的解决方案都不起作用。在这种情况下，有一个解决方案：

.表格{显示：表格；}.table行{显示：表格行；}.表格单元格{显示：表格单元格；}.容器{宽度：400px；高度：300px；}.页眉{背景：青色；}.车身{背景：黄色；高度：100%；}.正文内容外包装{高度：100%；}.正文内容内包装{高度：100%；位置：相对；溢出：自动；}.正文内容{位置：绝对；顶部：0；底部：0；左：0；右：0；}<div class=“table container”><div class=“table row header”>＜div＞这是高度未知的标头＜/div＞＜div＞这是高度未知的标头＜/div＞＜div＞这是高度未知的标头＜/div＞</div><div class=“table row body”><div class=“table cell body content outer wrapper”><div class=“body content inner wrapper”><div class=“body content”><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div></div></div></div></div></div>

原始来源：在CSS中处理溢出时填充容器的剩余高度

JSFiddle实时预览

2015-02-20 17:12:17

文森特，我会用你的新要求再次回答。因为你不在乎内容太长会被隐藏，所以你不需要浮动标题。只需将溢出隐藏在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

这是一个使用网格的答案。

.the-container-div {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto min-content;
  height: 100vh;
}
.view-to-remain-small {
  grid-row: 2;
}

.view-to-be-stretched {
  grid-row: 1
}

2021-03-08 05:03:38

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

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

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

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

2008-09-18 08:16:50

它从未像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填充剩余屏幕空间的高度

推荐文章

最新文章

标签