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

问：

我正在开发一个 Web 应用程序，我希望内容填满整个屏幕的高度。

该页面有一个标题，其中包含徽标和帐户信息。这可能是任意高度。我希望内容 div 将页面的其余部分填充到底部。

我有一个标题和一个内容.目前，我正在使用表格进行布局，如下所示：divdiv

CSS 和 HTML

#page {
  height: 100%;
  width: 100%
}

#tdcontent {
  height: 100%;
}

#content {
  overflow: auto;  /* or overflow: hidden; */
}

<table id="page">
  <tr>
    <td id="tdheader">
      <div id="header">...</div>
    </td>
  </tr>
  <tr>
    <td id="tdcontent">
      <div id="content">...</div>
    </td>
  </tr>
</table>

页面的整个高度都被填满，不需要滚动。

对于内容 div 中的任何内容，设置会将其放在标题的正下方。有时，内容将是一个真实的表，其高度设置为 100%。放进去不会让它起作用。top: 0;headercontent

有没有办法在不使用的情况下达到相同的效果？table

更新：

内容中的元素也将高度设置为百分比。所以里面 100% 的东西会把它填满到底部。50%的两个元素也是如此。divdiv

更新2：

例如，如果标题占据了屏幕高度的 20%，则指定为 50% 的表格将占用 40% 的屏幕空间。到目前为止，将整个东西包装在一张表格中是唯一有效的方法。#content

CSS HTML 表格

51赞 AmeliaBR 1/20/2014

对于将来在这里绊倒的任何人，您可以在大多数浏览器中获得所需的表格布局，而无需表格标记，通过使用和相关属性，请参阅这个非常相似问题的答案。display:table

4赞 Gill Bates 4/14/2014

我试图恢复您的设置 - jsfiddle.net/ceELs - 但它不起作用，我错过了什么？

7赞 Gohan 6/20/2014

@Mr. Alien的回答简单有用，http://stackoverflow.com/a/23323175/188784 看看

5赞 Damien 7/2/2014

实际上，即使使用表格，您描述的内容也不起作用：如果内容占用的垂直空间大于屏幕高度，则表格单元格和整个表格将扩展到屏幕底部之外。内容的 overflow：auto 不会显示滚动条。

3赞 A G 4/19/2022

在这一天（>2020）使用网格会更好，grid-template-rows： auto 1fr <-将达到您想要的效果，还可以使网格容器具有填充页面100VH的最小高度。

答：

19赞 Jerph 9/18/2008 #1

<!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;
    color: #FFF;
}

#header
{
    float: left;
    width: 100%;
    background: red;
}

#content
{
    height: 100%;
    overflow: auto;
    background: blue;
}

</style>
</head>
<body>

    <div id="content">
        <div id="header">
                Header
                <p>Header stuff</p>
        </div>
            Content
            <p>Content stuff</p>
    </div>

</body>
</html>

在所有理智的浏览器中，您可以将“header”div 放在内容之前，作为同级，并且相同的 CSS 将起作用。但是，在这种情况下，如果浮点数为 100%，则 IE7- 无法正确解释高度，因此标头需要位于内容中，如上所述。溢出：auto 将导致 IE 上的双滚动条（始终显示视口滚动条，但禁用），但如果没有它，内容在溢出时会剪切。

286赞 NICCAI 9/18/2008 #2

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

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

获取此值并设置元素的高度后，需要将事件处理程序附加到窗口 onload 和 onresize，以便可以触发 resize 函数。

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

3赞 Vincent McNabb 9/18/2008

这就是我的怀疑。但是，该应用程序也可以在关闭 Javascript 的情况下运行，所以我想我会继续使用该表。

6赞 Travis 5/5/2010

文森特，坚持自己的立场。我想做完全相同的事情，但css似乎是不可能的？我不确定，但无论如何，其他大量解决方案都无法满足您的要求。javascript 是目前唯一可以正常工作的。

7赞 Jerph 9/19/2008 #3

文森特，我会用你的新要求再次回答。由于您不在乎内容是否太长而被隐藏，因此您不需要浮动标题。只需将 overflow 隐藏在 html 和 body 标签上，并将 height 设置为 100%。内容将始终比标题高度的视口长，但它将被隐藏并且不会导致滚动条。#content

<!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>

29赞 Christopher 4/11/2011 #4

我也一直在寻找这个问题的答案。如果你有幸能够面向 IE8 及更高版本，你可以使用和相关值来获取包含块级元素（包括 div）的表的渲染规则。display:table

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

13赞 B_G 6/20/2011 #5

我为此苦苦挣扎了一段时间，最终得到了以下结果：

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

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%;
}

17赞 Yugal Jindle 3/17/2013

如果您不知道标题的高度怎么办？

-2赞 STeN 8/6/2011 #6

它从来没有以其他方式为我工作，然后使用 JavaScript，正如 NICCAI 在第一个答案中建议的那样。我正在使用这种方法通过谷歌地图重新缩放。<div>

以下是如何执行此操作的完整示例（适用于 Safari/FireFox/IE/iPhone/Andorid（适用于旋转））：

CSS的

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

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

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

JS系列

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>

0赞 super_ylam 11/17/2022

代码不起作用。建议添加 JQuery： <script src=“code.jquery.com/jquery-3.5.1.min.js”></script> 并修改函数调整大小如下： function resize（） { $（'#contentId'）.height（$（window）.height（）-$（'#headerId'）.height（）） }

26赞 Tonye - True Vine Productions 10/17/2011 #7

对我有用的方法（在另一个 div 中使用一个 div，我假设在所有其他情况下）是将底部填充设置为 100%。也就是说，将其添加到您的 css / 样式表中：

padding-bottom: 100%;

17赞 mlibby 11/23/2013

100%什么？如果我尝试这样做，我会得到一个巨大的空白区域，并且滚动开始发生。

1赞 Nijat Mursali 11/24/2022

我不知道为什么这会得到赞成票。

194赞 h--n 10/21/2011 #8

原帖是3年多前的。我想很多像我一样来这篇文章的人都在寻找一种类似应用程序的布局解决方案，比如以某种方式固定的页眉、页脚和全高内容占据其余屏幕。如果是这样，这篇文章可能会有所帮助，它适用于 IE7+ 等。

http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/

以下是该帖子中的一些片段：

@media screen { 
  
  /* start of screen rules. */ 
  
  /* Generic pane rules */
  body { margin: 0 }
  .row, .col { overflow: hidden; position: absolute; }
  .row { left: 0; right: 0; }
  .col { top: 0; bottom: 0; }
  .scroll-x { overflow-x: auto; }
  .scroll-y { overflow-y: auto; }

  .header.row { height: 75px; top: 0; }
  .body.row { top: 75px; bottom: 50px; }
  .footer.row { height: 50px; bottom: 0; }
  
  /* end of screen rules. */ 
}

<div class="header row" style="background:yellow;">
    <h2>My header</h2>
</div> 
<div class="body row scroll-y" style="background:lightblue;">
    <p>The body</p>
</div> 
<div class="footer row" style="background:#e9e9e9;">
    My footer
</div>

89赞 Roman Starkov 3/5/2012

这只有一个问题：页眉和页脚没有自动调整大小。这才是真正的困难，这就是为什么“这是不可能的”答案目前排在首位的原因......

12赞 Thaoms 2/20/2012 #9

为什么不就这样呢？

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

对我有用

4赞 htho 9/14/2012 #10

我找到了一个非常简单的解决方案，因为对我来说，这只是一个设计问题。我希望页面的其余部分不要在红色页脚下方为白色。所以我将页面背景颜色设置为红色。并将内容 backgroundcolor 设置为白色。将内容高度设置为 eg。20em 或 50% 几乎空白的页面不会使整个页面变红。

5赞 Arun 4/27/2013 #11

试试这个

var sizeFooter = function(){
    $(".webfooter")
        .css("padding-bottom", "0px")
        .css("padding-bottom", $(window).height() - $("body").height())
}
$(window).resize(sizeFooter);

28赞 Mikko Rantalainen 5/3/2013 #12

如果您可以处理不支持旧浏览器（即 MSIE 9 或更早版本）的问题，则可以使用已经是 W3C CR 的灵活框布局模块来执行此操作。该模块还允许其他不错的技巧，例如重新排序内容。

不幸的是，MSIE 9 或更低版本不支持此功能，您必须为 Firefox 以外的每个浏览器的 CSS 属性使用 vendor 前缀。希望其他供应商也能尽快删除前缀。

另一种选择是 CSS 网格布局，但它对稳定版本的浏览器的支持更少。实际上，只有 MSIE 10 支持此功能。

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

使用 display： grid 的示例：

html, body
{
  min-height: 100vh;
  padding: 0;
  margin: 0;
}

body
{
  display: grid;
  grid:
    "myheader" auto
    "mymain" minmax(0,1fr)
    "myfooter" auto /
    minmax(10rem, 90rem);
}

header
{
  grid-area: myheader;
  background: yellow;
}

main
{
  grid-area: mymain;
  background: pink;
  align-self: center
    /* or stretch
      + display: flex;
      + flex-direction: column;
      + justify-content: center; */
}

footer
{
  grid-area: myfooter;
  background: cyan;
}

<header>Header content</header>
<main>Main content which should be centered and the content length may change.
<details><summary>Collapsible content</summary>
<p>Here's some text to cause more vertical space to be used.</p>
<p>Here's some text to cause more vertical space to be used (2).</p>
<p>Here's some text to cause more vertical space to be used (3).</p>
<p>Here's some text to cause more vertical space to be used (4).</p>
<p>Here's some text to cause more vertical space to be used (5).</p>
</details>
</main>
<footer>Footer content</footer>

使用 display： flex 的示例：

html, body
{
  min-height: 100vh;
  padding: 0;
  margin: 0;
}

body
{
  display: flex; 
}

main
{
  background: pink;
  align-self: center;
}

<main>Main content which should be centered and the content length may change.
<details><summary>Collapsible content</summary>
<p>Here's some text to cause more vertical space to be used.</p>
<p>Here's some text to cause more vertical space to be used (2).</p>
<p>Here's some text to cause more vertical space to be used (3).</p>
<p>Here's some text to cause more vertical space to be used (4).</p>
<p>Here's some text to cause more vertical space to be used (5).</p>
</details>
</main>

0赞 user21398 11/13/2021

你能用flexbox/grid添加一个例子吗？

2赞 Mikko Rantalainen 11/17/2021

我添加了同时使用和的示例。请注意，如果这足以满足您的需求，通常更容易使用。好处是，您可以使用逻辑网格区域名称并仅更改属性以根据需要切换布局，而无需重新排序元素顺序。请注意，Chrome 不支持，如果您想要嵌套布局，这将使事情变得容易得多。您应该根据辅助功能需求而不是根据视觉顺序对元素进行排序。gridflexdisplay:flexdisplay:gridgridsubgrid

0赞 Mikko Rantalainen 11/18/2021

请注意，您可以在父元素中使用或。如果内容换行，则它们之间的差异与包装项目有关。align-selfalign-itemsalign-content

165赞 Danield 6/6/2013 #13

您可以使用 CSS 表，而不是在标记中使用表。

标记

<body>    
    <div>hello </div>
    <div>there</div>
</body>

（相关）CSS的

body
{
    display:table;
    width:100%;
}
div
{
    display:table-row;
}
div+ div
{
    height:100%;  
}

FIDDLE1和FIDDLE2

这种方法的一些优点是：

1）更少的标记

2）标记比表格更具语义性，因为这不是表格数据。

3）浏览器支持非常好：IE8+，所有现代浏览器和移动设备（caniuse)

为了完整起见，这里是 CSS 表模型的 css 属性的等效 Html 元素

table    { display: table }
tr       { display: table-row }
thead    { display: table-header-group }
tbody    { display: table-row-group }
tfoot    { display: table-footer-group }
col      { display: table-column }
colgroup { display: table-column-group }
td, th   { display: table-cell }
caption  { display: table-caption }

9赞 Greg 7/6/2013 #14

实际上，您可以使用将区域拆分为两个元素（标题和内容），其中标题的高度可以不同，并且内容填充剩余空间。这适用于整个页面，以及当该区域只是另一个元素的内容时，设置为或。只要父元素具有非零高度，它就会起作用。display: tablepositionrelativeabsolutefixed

请参阅此小提琴以及下面的代码：

CSS：

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

p {
    margin: 0;
    padding: 0;
}

.additional-padding {
    height: 50px;
    background-color: #DE9;
}

.as-table {
    display: table;
    height: 100%;
    width: 100%;
}

.as-table-row {
    display: table-row;
    height: 100%;
}

#content {
    width: 100%;
    height: 100%;
    background-color: #33DD44;
}

HTML格式：

<div class="as-table">
    <div id="header">
        <p>This header can vary in height, it also doesn't have to be displayed as table-row. It will simply take the necessary space and the rest below will be taken by the second div which is displayed as table-row. Now adding some copy to artificially expand the header.</p>
        <div class="additional-padding"></div>
    </div>
    <div class="as-table-row">
        <div id="content">
            <p>This is the actual content that takes the rest of the available space.</p>
        </div>
    </div>
</div>

136赞 Mr. Alien 4/27/2014 #15

仅 CSS 方法（如果高度已知/固定）

当你希望中间元素垂直跨越整个页面时，你可以使用 CSS3 中引入的 calc（）。

假设我们有一个固定的高度和元素，我们希望标签占据整个可用的垂直高度......headerfootersection

演示

假设标记和你的 CSS 应该是

html,
body {
  height: 100%;
}

header {
  height: 100px;
  background: grey;
}

section {
  height: calc(100% - (100px + 150px));
  /* Adding 100px of header and 150px of footer */
  background: tomato;
}

footer {
  height: 150px;
  background-color: blue;
}

<header>100px</header>
<section>Expand me for remaining space</section>
<footer>150px</footer>

所以在这里，我所做的是，将元素的高度相加，而不是从使用函数中扣除。100%calc()

只需确保用于父元素即可。height: 100%;

20赞 Danield 4/28/2014

OP表示，标题可以是任意高度。因此，如果您事先不知道身高，您将无法使用计算:(

1赞 rlf89 5/9/2022

就我而言，效果很好。谢谢你的想法！height: calc( 100vh - ( 100px + 150px ) );

0赞 Thanasis 11/17/2023

多年后的2023年。对于那些不想使用 flex 的人。calc函数更可控，简单明了。

1692赞 Pebbl 7/27/2014 #16

2015 年更新：Flexbox 方法

还有另外两个答案简要提到了 flexbox;然而，那是两年多前的事了，他们没有提供任何例子。flexbox 的规范现在已经确定下来了。

注意：虽然 CSS Flexible Boxes Layout 规范处于候选推荐阶段，但并非所有浏览器都实现了它。WebKit 实现必须以 -webkit- 为前缀;Internet Explorer 实现了旧版本的规范，前缀为 -ms-;Opera 12.10 实现了最新版本的规范，没有前缀。请参阅每个属性的兼容性表，了解最新的兼容性状态。

（摘自 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)

所有主流浏览器和 IE11+ 都支持 Flexbox。对于 IE 10 或更早版本，您可以使用 FlexieJS 填充码。

要查看当前支持，您还可以在此处查看：http://caniuse.com/#feat=flexbox

工作实例

使用 flexbox，您可以轻松地在具有固定尺寸、内容大小尺寸或剩余空间尺寸的任何行或列之间切换。在我的示例中，我已将页眉设置为对齐到其内容（根据 OPs 问题），我添加了一个页脚来显示如何添加固定高度区域，然后设置内容区域以填充剩余空间。

html,
body {
  height: 100%;
  margin: 0;
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.box .row {
  border: 1px dotted grey;
}

.box .row.header {
  flex: 0 1 auto;
  /* The above is shorthand for:
  flex-grow: 0,
  flex-shrink: 1,
  flex-basis: auto
  */
}

.box .row.content {
  flex: 1 1 auto;
}

.box .row.footer {
  flex: 0 1 40px;
}

<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->

<div class="box">
  <div class="row header">
    <p><b>header</b>
      <br />
      <br />(sized to content)</p>
  </div>
  <div class="row content">
    <p>
      <b>content</b>
      (fills remaining space)
    </p>
  </div>
  <div class="row footer">
    <p><b>footer</b> (fixed height)</p>
  </div>
</div>

在上面的 CSS 中，flex 属性简写了 flex-grow、flex-shrink 和 flex-basis 属性，以建立 flex 项的灵活性。Mozilla对柔性盒子模型有很好的介绍。

11赞 Erdal G. 11/15/2015

为什么属性在每个 div 中都会被覆盖？flex: 0 1 30px;box .row

17赞 Brian Burns 5/11/2016

这是浏览器对 flexbox 的支持 - 很高兴看到所有绿色 - caniuse.com/#feat=flexbox

110赞 przemcio 7/14/2016

这绝对是一个非常好的方法，它几乎可以;)当div.content的内容超过原来的flex-ed高度时，会出现一个小问题。在当前的实现中，“页脚”将被推低，这不是开发人员所期望的;)所以我做了一个非常简单的修复。jsfiddle.net/przemcio/xLhLuzf9/3我在容器和溢出滚动上添加了额外的 flex。

1赞 baruchiro 4/11/2022

因此，要在 DOM 树中实现它，我需要将 from the through all 设置为我需要的？height: 100%bodydivdiv

1赞 Nijat Mursali 11/24/2022

有趣的是，这个解决方案不适用于我的情况，但是当我改用它时，效果很好height: 100%100vh

37赞 Ormoz 9/15/2014 #17

它可以纯粹通过使用以下方法完成：CSSvh

#page {
    display:block; 
    width:100%; 
    height:95vh !important; 
    overflow:hidden;
}

#tdcontent {
    float:left; 
    width:100%; 
    display:block;
}

#content {      
    float:left; 
    width:100%; 
    height:100%; 
    display:block; 
    overflow:scroll;
}

和HTML

<div id="page">

   <div id="tdcontent"></div>
   <div id="content"></div>

</div>

我检查了它，它适用于所有主流浏览器：、和ChromeIEFireFox

45赞 John Kurlak 2/21/2015 #18

当您需要底部 div 滚动时，当内容太高时，发布的解决方案都不起作用。以下是适用于该情况的解决方案：

.table {
  display: table;
}

.table-row {
  display: table-row;
}

.table-cell {
  display: table-cell;
}

.container {
  width: 400px;
  height: 300px;
}

.header {
  background: cyan;
}

.body {
  background: yellow;
  height: 100%;
}

.body-content-outer-wrapper {
  height: 100%;
}

.body-content-inner-wrapper {
  height: 100%;
  position: relative;
  overflow: auto;
}

.body-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

<div class="table container">
  <div class="table-row header">
    <div>This is the header whose height is unknown</div>
    <div>This is the header whose height is unknown</div>
    <div>This is the header whose height is unknown</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>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
        </div>
      </div>
    </div>
  </div>
</div>

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

JSFiddle 实时预览

101赞 zok 2/28/2015 #19

一个简单的解决方案，使用 flexbox：

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.content {
  flex-grow: 1;
}

<body>
  <div>header</div>
  <div class="content"></div>
</body>

Codepen 示例

另一种解决方案，其中 div 在内容 div 中居中

41赞 dev.meghraj 8/24/2015 #20

CSS3 简单方法

height: calc(100% - 10px); // 10px is height of your first div...

如今，所有主流浏览器都支持它，因此，如果您不需要支持老式浏览器，请继续。

22赞 puiu 10/30/2015 #21

现在有很多答案，但我发现曾经在需要填充整个可用垂直空间的 div 元素上工作。height: 100vh;

这样，我就不需要玩弄显示或定位了。当使用 Bootstrap 制作仪表板时，这派上用场，其中我有一个侧边栏和一个主栏。我希望主屏幕能够拉伸并填充整个垂直空间，以便我可以应用背景颜色。

div {
    height: 100vh;
}

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

30赞 Epirocks 3/13/2018

但 100vh 听起来像是所有高度，而不是其余高度。如果你有一个标题，然后你想填充其余的标题怎么办

39赞 Michel 1/4/2016 #22

免责声明：公认的答案给出了解决方案的想法，但我发现它有点臃肿，因为不必要的包装器和 css 规则。下面是一个具有很少 css 规则的解决方案。

HTML 5的

<body>
    <header>Header with an arbitrary height</header>
    <main>
        This container will grow so as to take the remaining height
    </main>
</body>

CSS的

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;       /* body takes whole viewport's height */
}

main {
  flex: 1;                 /* this will make the container take the free space */
}

上面的解决方案使用视口单元和弹性框，因此是 IE10+，前提是您使用 IE10 的旧语法。

可使用的 Codepen：链接到 codepen

或者这个，对于那些需要主容器在内容溢出的情况下可滚动的人：链接到 codepen

0赞 Naeem Baghi 1/1/2018

main { height： 10px; flex： 1; overflow： auto }

89赞 nguyên 5/22/2016 #23

使用：height: calc(100vh - 110px);

法典：

  
.header { height: 60px; top: 0; background-color: green}
.body {
    height: calc(100vh - 110px); /*50+60*/
    background-color: gray;
}
.footer { height: 50px; bottom: 0; }

<div class="header">
    <h2>My header</h2>
</div> 
<div class="body">
    <p>The body</p>
</div> 
<div class="footer">
    My footer
</div>

5赞 Pat M 7/2/2016 #24

衍生出外星人先生的想法......

这似乎是一个比流行的 flex box for for CSS3 browser 更干净的解决方案。

只需将 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));
}

当然，数学可以简化，但你明白了......

5赞 Anthony Brenelière 8/26/2016 #25

我遇到了同样的问题，但我无法使用上面的弹性框解决问题。因此，我创建了自己的模板，其中包括：

具有固定大小元素的标头
页脚
带有滚动条的侧栏，该滚动条占据剩余高度
内容

我使用了 flexbox，但方式更简单，只使用属性 display： flex 和 flex-direction： row|column：

我确实使用angular，我希望我的组件大小是其父元素的100%。

关键是设置所有父母的大小（以百分比为单位），以限制他们的大小。在以下示例中，myapp height 具有 100% 的视口。

主组件具有 90% 的视口，因为页眉和页脚具有 5%。

我在这里发布了我的模板：https://jsfiddle.net/abreneliere/mrjh6y2e/3

       body{
        margin: 0;
        color: white;
        height: 100%;
    }
    div#myapp
    {
        display: flex;
        flex-direction: column;
        background-color: red; /* <-- painful color for your eyes ! */
        height: 100%; /* <-- if you remove this line, myapp has no limited height */
    }
    div#main /* parent div for sidebar and content */
    {
        display: flex;
        width: 100%;
        height: 90%; 
    }
    div#header {
        background-color: #333;
        height: 5%;
    }
    div#footer {
        background-color: #222;
        height: 5%;
    }
    div#sidebar {
        background-color: #666;
        width: 20%;
        overflow-y: auto;
     }
    div#content {
        background-color: #888;
        width: 80%;
        overflow-y: auto;
    }
    div.fized_size_element {
        background-color: #AAA;
        display: block;
        width: 100px;
        height: 50px;
        margin: 5px;
    }

HTML格式：

<body>
<div id="myapp">
    <div id="header">
        HEADER
        <div class="fized_size_element"></div>

    </div>
    <div id="main">
        <div id="sidebar">
            SIDEBAR
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
        </div>
        <div id="content">
            CONTENT
        </div>
    </div>
    <div id="footer">
        FOOTER
    </div>
</div>
</body>

0赞 James Yang 10/13/2016 #26

它是动态计算重新挖掘屏幕空间的，最好使用 Javascript。

你可以使用 CSS-IN-JS 技术，如下图所示：

https://github.com/cssobj/cssobj

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

7赞 grinmax 2/1/2017 #27

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

50赞 Alireza 6/18/2017 #28

你干脆用哪个代表CSS怎么样......vhview height

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

body {
  padding: 0;
  margin: 0;
}

.full-height {
  width: 100px;
  height: 100vh;
  background: red;
}

<div class="full-height">
</div>

另外，请看下面我为您创建的图片：

33赞 LarryBud 3/9/2018

这只有在您希望 div 跨越窗口的整个高度时才有用。现在在它上面放一个高度未知的标题 div。

18赞 Paulie_D 7/4/2017 #29

CSS网格解决方案

只需定义 with 和 using 和 value 属性。bodydisplay:gridgrid-template-rowsautofr

* {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

header {
  padding: 1em;
  background: pink;
}

main {
  padding: 1em;
  background: lightblue;
}

footer {
  padding: 2em;
  background: lightgreen;
}

main:hover {
  height: 2000px;
  /* demos expansion of center element */
}

<header>HEADER</header>
<main>MAIN</main>
<footer>FOOTER</footer>

网格完整指南 @ CSS-Tricks.com

0赞 George 12/5/2021

嗯。它现在得到了广泛的支持，所以没有理由以另一种方式做

10赞 Zohab Ali 3/23/2018 #30

 style="height:100vh"

为我解决了这个问题。就我而言，我将其应用于所需的 div

29赞 gadolf 2/26/2020 #31

在 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>

6赞 greenoldman 11/3/2022

所有这些类从何而来？当内容比屏幕长时怎么办？

17赞 Michael Schade 4/15/2020 #32

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

html {
  height: 100%;
}

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

section {
  display: flex;
  flex-direction: column;
  height: 100%;
}

div:first-child {
  background: gold;
}

div:last-child {
  background: plum;
  flex-grow: 1;
}

<body>
  <section>
    <div>FIT</div>
    <div>GROW</div>
  </section>
</body>

3赞 user11284257 10/15/2020 #33

使用 CSS Grid 的另一种解决方案

定义网格

.root {
  display: grid;
  grid-template-rows: minmax(60px, auto) minmax(0, 100%);
}

第一行（标题）：可以设置最小高度，最大高度取决于内容。第二行（内容）将尝试适应标题后留下的可用空间。

这种方法的优点是内容可以独立于页眉滚动，因此页眉始终位于页面顶部

body, html {
  margin: 0;
  height: 100%;
}

.root {
  display: grid;
  grid-template-rows: minmax(60px, auto) minmax(0, 100%);
  height: 100%;
}

.header {
  background-color: lightblue;
}

button {
  background-color: darkslateblue;
  color: white;
  padding: 10px 50px;
  margin: 10px 30px;
  border-radius: 15px;
  border: none;
}

.content {
  background-color: antiquewhite;
  overflow: auto;
}

.block {
  width: calc(100% - 20px);
  height: 120px;
  border: solid aquamarine;
  margin: 10px;
}

<div class="root">
  <div class="header">
    <button>click</button>
    <button>click</button>
    <button>click</button>
    <button>click</button>
    <button>click</button>
  </div>
  <div class="content">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>
  <div class="footer"></div>
</div>

-4赞 Chukwuemeka Maduekwe 3/4/2021 #34

如果你在父 div 上使用 display： flex，你所要做的就是简单地将高度设置为拉伸或填充，就像这样

.divName {
    height: stretch
}

4赞 Just a coder 3/8/2021 #35

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

.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
}

0赞 Chong Lip Phang 11/11/2021 #36

我的一些组件是动态加载的，这导致我在设置导航栏的高度时出现问题。

我所做的是使用 ResizeObserver API。

function observeMainResize(){
   const resizeObserver = new ResizeObserver(entries => {
      for (let entry of entries) {
         $("nav").height(Math.max($("main").height(),
                                  $("nav") .height()));
      }
   });
   resizeObserver.observe(document.querySelector('main'));
}

然后：

...
<body onload="observeMainResize()">
   <nav>...</nav>
   <main>...</main>
...

3赞 yoty66 2/21/2022 #37

一个不错的技巧是将 css margin 属性设置为“auto”。这将使 div 占据所有剩余的高度和宽度。

缺点是它将被计算为保证金而不是内容。

请参阅随附的屏幕截图：

-4赞 yongrui 10/25/2022 #38

高度： calc（100% - 650px）; 位置：绝对;

3赞 Nyi Nyi Hmue Aung 11/3/2022 #39

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

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

0赞 Damian Akpan 1/15/2023 #40

我的方法利用了CSS中的函数。它计算当已知大小的项目出现在页面上时的剩余空间。calc()

#fixed-size {
  height: 2rem;
  background-color: red;
}

#fill-remaining {
  background-color: blue;
  height: calc(100vh - 2rem);
}

<div>
  <div id="fixed-size">Known Size</div>
  <div id="fill-remaining">Fill Remaining</div>
</div>

0赞 TylerH 2/26/2023

这个答案已经提供了无数次，包括 stackoverflow.com/a/37370197/2756409。请只发布新的问题答案。

4赞 Timileyin Oluwayomi 2/13/2023 #41

试试这个方法：

.container {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.first-div {
     height: 20vh; // this height can be any length
}

.second-div {
     flex: 1; // fills up the remaining space on the screen
}

<div class='container'>
    <div class='first-div'>
        ...
    </div>
    <div class='second-div'>
        ...
    </div>
</div>

-4赞 Zana Temel 2/26/2023 #42

在计算完内容的像素后，您可以尝试通过在另一个标签下从 100vh 中减去它来找到它。##

.header {
  height: 100px;
  /* set the height of the header */
  background-color: #ccc;
}

.content {
  height: calc(100vh - 100px);
  /* calculate the height of the content */
  background-color: #eee;
}

<div class="header">Header content</div>
<div class="content">Content goes here</div>

1赞 TylerH 2/26/2023

此解决方案已在此处 stackoverflow.com/a/37370197/2756409 提供，可能在其他地方提供。

上一个：如何使用javascript、css和/或html在表格中的图像上居中文本？

下一个：python 中的正则表达式问题

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

Make a div fill the height of the remaining screen space

评论

评论

评论

评论

评论

评论

评论

标记

（相关）CSS的

仅 CSS 方法（如果高度已知/固定）

评论

2015 年更新：Flexbox 方法

工作实例

评论

评论

评论

评论

评论

评论

评论

评论