Question

我正在开发一个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％。到目前为止，将整个事物包装在表中是唯一有效的方法。

Answer 1

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属性，以确定弹性项目的灵活性。 Mozilla有good introduction to the flexible boxes model。

Answer 2

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

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

一旦你可以获得这个值并设置元素的高度，你需要将事件处理程序附加到窗口onload和onresize，以便你可以激活你的resize函数。

另外，假设您的内容可能比视口大，则需要设置overflow-y进行滚动。

Answer 3

原帖超过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>

Answer 4

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

Answer 5

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

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

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

Demo

假定加价

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

所以你的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;
}

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

请确保您使用height: 100%;作为父元素。

Answer 6

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

Answer 7

如何在 CSS 中使用vh代表view height ......

请查看我在下面为您创建的代码段并运行它：

＆＃13;

body {
  padding: 0;
  margin: 0;
}

.full-height {
  width: 100px;
  height: 100vh;
  background: red;
}

＆＃13;

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

＆＃13;

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

Answer 8

CSS3简单方法

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

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

Answer 9

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

Answer 10

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

＆＃13;

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.content {
  flex-grow: 1;
}

＆＃13;

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

＆＃13;

Codepen sample

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

Answer 11

当内容太高时需要底部div滚动时，没有任何解决方案发布。这是一个适用于这种情况的解决方案：

HTML：

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

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

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

JSFiddle live preview

Answer 12

我一直在寻找答案。如果您有幸能够以IE8及更高版本为目标，则可以使用display:table及相关值来获取包含div的块级元素的表的呈现规则。

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

Answer 13

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

padding-bottom: 100%;

Answer 14

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

Answer 15

<!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-不能正确解释高度，因此标题需要在内容中，如上所述。 overflow：auto会在IE上导致双滚动条（它总是有视口滚动条可见，但是已禁用），但没有它，如果内容溢出，内容将会剪辑。

Answer 16

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

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

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

Answer 17

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

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

div {
    height: 100vh;
}

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

Answer 18

我暂时搁置了一段时间，最后得到了以下内容：

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

Answer 19

为什么不这样呢？

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

为我工作

Answer 20

 style="height:100vh"

为我解决了这个问题。在我的情况下，我将其应用于所需的div

Answer 21

CSS Grid Solution

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

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

Answer 22

这是我自己的Pebbl解决方案的最低版本。永远花时间找到使它在IE11中工作的技巧。（也已在Chrome，Firefox，Edge和Safari中进行了测试。）

<!DOCTYPE html>
<html>
<head>
<style>
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;
    }
</style>
</head>
<body>
    <section>
      <div>FIT</div>
      <div>GROW</div>
    </section>
</body>
</html>

Answer 23

文森特，我会再次使用您的新要求回答。由于您不关心隐藏的内容（如果内容太长），您不需要浮动标题。只需在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>

Answer 24

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

See this fiddle以及以下代码：

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>

Answer 25

试试这个

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

Answer 26

在引导程序中：

CSS样式：

owner

1）仅填充剩余屏幕空间的高度：

html, body {
    height: 100%;
}

2）填充剩余屏幕空间的高度，并将内容与父元素的中间对齐：

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

Answer 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/

Answer 28

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

Answer 29

脱离外星人先生的想法......

对于支持CSS3的浏览器来说，这似乎比流行的弹性框更清晰。

只需将最小高度（而不是高度）与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));
}

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

Answer 30

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

具有固定大小元素的标题
一个页脚
带有滚动条的侧栏，占据剩余高度
含量

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

我确实使用了角度，我希望我的组件大小为其父元素的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>

Answer 31

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

Answer 32

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

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

Answer 33

使用纯 CSS。

“内容”DIV 的高度 - 位于“页眉”和“页脚”之间，无需进行任何高度计算。

请参考以下链接。

https://stackblitz.com/edit/web-platform-njdf2p?file=index.html

Answer 34

动态计算提醒屏幕空间，使用Javascript更好。

您可以使用CSS-IN-JS技术，如下面的lib：

https://github.com/cssobj/cssobj

DEMO：https://cssobj.github.io/cssobj-demo/

Answer 35

从未以其他方式为我工作，然后使用JavaScript 作为NICCAI在第一个答案中建议的。我正在使用该方法使用Google地图重新调整<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>

Answer 36

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

.divName {
    height: stretch
}

Answer 37

如果唯一的问题是身高，那么只使用div似乎有效：

<div id="header">header content</div>
<div id="content" style="height:100%">content content</div>

在一个简单的测试中，标题/内容的宽度在您的示例和我的示例中是不同的，但我不确定您的帖子是否关注宽度？

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

37 个答案:

2015年更新：flexbox方法

工作示例

标记

（相关）CSS

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