让一个 div 填充剩余屏幕空间的高度

Posted 2023-03-06

【中文标题】让一个 div 填充剩余屏幕空间的高度

【英文标题】：Make a div fill the height of the remaining screen space

【发布时间】：2010-09-10 13:11:56

【问题描述】：

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

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

我有一个标题div 和一个内容div。目前我正在使用这样的布局表格：

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 中的任何内容，设置 top: 0; 会将其放在标题下方。有时内容将是一个真实的表格，其高度设置为 100%。将header 放入content 将无法正常工作。

有没有办法不用table也能达到同样的效果？

更新：

内容div 中的元素也将高度设置为百分比。因此，div 中 100% 的内容会将其填充到底部。 50% 的两个元素也是如此。

更新 2：

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

【问题讨论】：

对于以后在这里磕磕绊绊的人，您可以在大多数浏览器中获得所需的表格布局，无需表格标记，通过使用display:table 和相关属性，请参阅this answer 非常类似的问题。

我尝试重新创建您的设置 - jsfiddle.net/ceELs - 但它不起作用，我错过了什么？

@Mr.外星人的回答简单实用，看看http://***.com/a/23323175/188784

其实你的描述是行不通的，即使是表格：如果内容占用的垂直空间大于屏幕高度，表格单元格和整个表格将扩展超出屏幕底部。您的内容溢出：自动不会出现滚动条。

@GillBates 它会在你指定父元素的高度后工作看jsfiddle.net/ceELs/5

【参考方案1】：

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

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

另一个选择是CSS Grid Layout，但稳定版本的浏览器对它的支持更少。实际上，只有 MSIE 10 支持这一点。

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

使用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>

【讨论】：

您能添加一个使用 flexbox/grid 的示例吗？

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

请注意，您可以在父元素中使用align-items 或align-content 而不是align-self。如果内容包装，它们之间的区别与包装的项目有关。

【参考方案2】：

我的一些组件是动态加载的，这导致我无法设置导航栏的高度。

我所做的是使用the 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】：

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

【参考方案4】：

在引导中：

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>

【参考方案5】：

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

.divName 
    height: stretch

【参考方案6】：

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

.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

【参考方案7】：

这是我自己的 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>

【参考方案8】：

使用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>

【参考方案9】：

2015 年更新：flexbox 方法

还有另外两个答案简要提到flexbox；但是，那是两年多以前的事了，他们没有提供任何示例。 flexbox 的规范现在肯定已经确定了。

注意：尽管 CSS 灵活框布局规范处于候选推荐阶段，但并非所有浏览器都实现了它。 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 shim。

要查看当前支持，您还可以在此处查看： 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 属性，以建立弹性项目的灵活性。 Mozilla 有一个good introduction to the flexible boxes model。

【讨论】：

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

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

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

具有透明度的导航栏不起作用。 rgba 中的 alpha 通道完全没有效果，固定的页眉/页脚只能有纯色背景。

【参考方案10】：

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

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

假设我们有一个 固定高度 header 和 footer 元素，我们希望 section 标记占据整个可用垂直高度...

Demo

假定的标记，你的 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>

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

只要确保您对父元素使用height: 100%;。

【讨论】：

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

【参考方案11】：

当您需要在内容太高时滚动底部 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>

Original source: Filling the Remaining Height of a Container While Handling Overflow in CSS

JSFiddle live preview

【讨论】：

天哪！我一直在寻找这个答案这么久！太感谢了。 Flexbox 在这里不起作用，但 table-cells 确实如此。太棒了。

【参考方案12】：

这完全可以由CSS 使用vh 完成：

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

我查了一下，它适用于所有主流浏览器：Chrome、IE 和 FireFox

【参考方案13】：

一个简单的解决方案，使用 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 sample

An alternate solution, with a div centered within the content div

【参考方案14】：

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

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

div 
    height: 100vh;

支持 IE9 及以上版本：click to see the link

【讨论】：

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

【参考方案15】：

在 CSS 中你可以简单地使用vh 代表view height...

看看下面我为你创建的代码sn-p并运行它：

body 
  padding: 0;
  margin: 0;


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

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

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

【讨论】：

只有当你想让一个 div 跨越窗口的整个高度时才好。现在在其上方放置一个高度未知的标题 div。

【参考方案16】：

 style="height:100vh"

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

【参考方案17】：

CSS3 简单方法

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

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

【参考方案18】：

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

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

以下是该帖子中的一些 sn-ps：

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

【讨论】：

这里只有一个问题：页眉和页脚不是自动调整大小的。 那是真正的困难，而那就是为什么“这不可能”的答案目前在顶部...

【参考方案19】：

我也一直在寻找这个问题的答案。如果你有幸能够针对 IE8 及以上版本，可以使用display:table 和相关值来获取包含 div 在内的块级元素的表格的呈现规则。

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

【参考方案20】：

衍生出异形先生的想法……

对于支持 CSS3 的浏览器，这似乎比流行的 flex box 更简洁。

只需将 min-height（而不是 height）与 calc() 一起用于内容块。

calc() 从 100% 开始，减去页眉和页脚的高度（需要包括填充值）

使用“min-height”而不是“height”特别有用，因此它可以与 javascript 呈现的内容和 Angular2 等 JS 框架一起使用。否则，一旦 javascript 呈现的内容可见，计算将不会将页脚推到页面底部。

这是一个使用 50 像素高度和 20 像素内边距的页眉和页脚的简单示例。

HTML：

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

CSS：

.content 
    min-height: calc(100% - (50px + 20px + 20px + 50px + 20px + 20px));

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

【参考方案21】：

CSS Grid Solution

只需使用display:grid 定义body，使用auto 和fr 值属性定义grid-template-rows。

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

A Complete Guide to Grids @ CSS-Tricks.com

【讨论】：

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

【参考方案22】：

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

您可以使用 CSS-IN-JS 技术，如下库：

https://github.com/cssobj/cssobj

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

【参考方案23】：

我遇到了同样的问题，但我无法使用上面的 flexbox 解决方案。所以我创建了自己的模板，其中包括：

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

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

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

关键是为所有父母设置大小（以百分比为单位），以限制他们的大小。在以下示例中，myapp 高度具有 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>

【参考方案24】：

使用： 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>

【参考方案25】：

您可以使用 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)

---

为了完整起见，这里是与The CSS table model 的 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  

【参考方案26】：

它从来没有像 NICCAI 在第一个答案中建议的那样使用 JavaScript 以其他方式为我工作。我正在使用这种方法通过谷歌地图重新调整<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>

【参考方案27】：

免责声明：接受的答案给出了解决方案的想法，但我发现它带有不必要的包装器和 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 */

上述解决方案使用 viewport units 和 flexbox，因此是 IE10+，前提是您使用 IE10 的旧语法。

可使用的 Codepen：link to codepen

或者这个，对于那些需要在内容溢出时滚动主容器的人：link to codepen

【讨论】：

主高度：10px;弹性：1；溢出：自动

【参考方案28】：

文森特，我会用你的新要求再次回答。由于您不关心内容是否太长而被隐藏，因此您不需要浮动标题。只需将溢出隐藏在 html 和 body 标签上，并将#content 高度设置为 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>

【参考方案29】：

试试这个

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

$(window).resize(sizeFooter);

【参考方案30】：

我为此挣扎了一段时间，结果如下：

由于很容易使内容 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%;

【讨论】：

不知道表头高度怎么办？