使div（高度）占据父级剩余高度

http://jsfiddle.net/S8g4E/

我有一个div带两个孩子的容器。第一个孩子有给定的身高。如何让第二个孩子占据容器的“自由空间” div而不指定特定高度？

在示例中，粉红色div也应占据白色空间。

与此问题类似：如何使div占据剩余高度？

但是我不想摆绝对的位置。

可以通过多种方式扩展#down子级以填充剩余的空间，#container具体取决于您希望获得的浏览器支持以及是否#up具有定义的高度。

样品

.container {
  width: 100px;
  height: 300px;
  border: 1px solid red;
  float: left;
}
.up {
  background: green;
}
.down {
  background: pink;
}
.grid.container {
  display: grid;
  grid-template-rows: 100px;
}
.flexbox.container {
  display: flex;
  flex-direction: column;
}
.flexbox.container .down {
  flex-grow: 1;
}
.calc .up {
  height: 100px;
}
.calc .down {
  height: calc(100% - 100px);
}
.overflow.container {
  overflow: hidden;
}
.overflow .down {
  height: 100%;
}

<div class="grid container">
  <div class="up">grid
    <br />grid
    <br />grid
    <br />
  </div>
  <div class="down">grid
    <br />grid
    <br />grid
    <br />
  </div>
</div>
<div class="flexbox container">
  <div class="up">flexbox
    <br />flexbox
    <br />flexbox
    <br />
  </div>
  <div class="down">flexbox
    <br />flexbox
    <br />flexbox
    <br />
  </div>
</div>
<div class="calc container">
  <div class="up">calc
    <br />calc
    <br />calc
    <br />
  </div>
  <div class="down">calc
    <br />calc
    <br />calc
    <br />
  </div>
</div>
<div class="overflow container">
  <div class="up">overflow
    <br />overflow
    <br />overflow
    <br />
  </div>
  <div class="down">overflow
    <br />overflow
    <br />overflow
    <br />
  </div>
</div>

格

CSS的grid布局提供了另一种选择，尽管它可能不如Flexbox模型那么简单。但是，只需要设置容器元素的样式即可：

.container { display: grid; grid-template-rows: 100px }

所述grid-template-rows定义的第一行作为固定100px的高度，并且保持行会自动拉伸以填充剩余的空间。

我非常确定IE11需要-ms-前缀，因此请确保在希望支持的浏览器中验证功能。

弹性盒

现在，CSS3的灵活框布局模块（flexbox）得到了良好的支持，并且可以非常容易地实现。由于它具有灵活性，因此即使在#up没有定义的高度时也可以使用。

#container { display: flex; flex-direction: column; }
#down { flex-grow: 1; }

重要的是要注意，IE10和IE11对某些flexbox属性的支持可能会出现问题，而IE9或更低版本完全不支持。

计算高度

另一个简单的解决方案是使用CSS3calc功能单元，正如Alvaro在他的回答中指出的那样，但是它要求第一个孩子的身高是一个已知值：

#up { height: 100px; }
#down { height: calc( 100% - 100px ); }

它得到了广泛的支持，唯一值得注意的例外是<= IE8或Safari 5（不支持）和IE9（部分支持）。其他一些问题包括将calc与transform或box-shadow结合使用，因此如果您担心此问题，请确保在多个浏览器中进行测试。

其他选择

如果需要较早的支持，则可以添加height:100%;，#down使粉红色div完全高出一个警告。因为#up将其向下推，将导致容器溢出。

因此，您可以添加overflow: hidden;到容器中以解决此问题。

另外，如果的高度#up是固定的，则可以将其绝对放置在容器中，并在上添加padding-top #down。

并且，另一个选择是使用表格显示：

#container { width: 300px; height: 300px; border: 1px solid red; display: table;}
#up { background: green; display: table-row; height: 0; }
#down { background: pink; display: table-row;}​

自从我问这个问题以来已经快两年了。我只是想出了解决我遇到的这个问题的css calc（），并认为如果有人遇到相同的问题，最好添加它。（通过我最终使用绝对位置的方式）。

http://jsfiddle.net/S8g4E/955/

这是CSS

#up { height:80px;}
#down {
    height: calc(100% - 80px);//The upper div needs to have a fixed height, 80px in this case.
}

有关更多信息，请参见：http : //css-tricks.com/a-couple-of-use-cases-for-calc/

浏览器支持：http : //caniuse.com/#feat=calc

我的答案仅使用CSS，并且不使用overflow：hidden或display：table-row。它要求第一个孩子确实具有给定的身高，但是在您的问题中，您指出只有第二个孩子需要指定其身高，因此我认为您应该认为这是可以接受的。

html

<div id="container">
    <div id="up">Text<br />Text<br />Text<br /></div>
    <div id="down">Text<br />Text<br />Text<br /></div>
</div>

的CSS

#container { width: 300px; height: 300px; border:1px solid red;}
#up { background: green; height: 63px; float:left; width: 100% }
#down { background:pink; padding-top: 63px; height: 100%; box-sizing: border-box; }

http://jsfiddle.net/S8g4E/288/

检查演示-http: //jsfiddle.net/S8g4E/6/

使用CSS-

#container { width: 300px; height: 300px; border:1px solid red; display: table;}
#up { background: green; display: table-row; }
#down { background:pink; display: table-row;}

除非我误解，你可以再补充height: 100%;和overflow:hidden;到#down。

#down { 
    background:pink; 
    height:100%; 
    overflow:hidden;
}​

现场演示

编辑：由于您不想使用overflow:hidden;，因此可以display: table;用于这种情况；但是，IE 8之前不支持它。（display: table;支持）

#container { 
    width: 300px; 
    height: 300px; 
    border:1px solid red;
    display:table;
}

#up { 
    background: green;
    display:table-row;
    height:0; 
}

#down { 
    background:pink;
    display:table-row;
}​

现场演示

注意：您已经说过要使#down高度为#container高度减去#up高度。该display:table;解决方案正是做到了这一点，而这个jsfiddle将会非常清楚地描绘出这一点。

您可以使用浮点数向下推送内容：

http://jsfiddle.net/S8g4E/5/

您有一个固定大小的容器：

#container {
    width: 300px; height: 300px;
}

内容允许在浮点数旁边流动。除非我们将浮点数设置为全宽：

#up {
    float: left;
    width: 100%;
}

虽然#up和#down占据首位，但#down的内容只能在浮动对象的底部之后开始#up：

#down {
    height:100%;
}​

抽象

我没有找到一个完全令人满意的答案，所以我不得不自己找出答案。

我的要求：

• 该元件应采取准确的剩余空间既可以当其含量大小为更小或更大的比剩余空间尺寸（在第二种情况下的滚动条应该被显示）;
• 该溶液应该工作时，父高度被计算，并且没有指定 ;
• calc()不应该被用来作为剩余的元素不应该知道什么关于另一个元素的大小;
• 应该使用现代而熟悉的布局技术，例如flexbox。

解决方案

• 将所有具有计算的高度（如果有）的直接父级和指定高度的下一个父级转换为flexbox ；
• 指定flex-grow: 1到所有直接父母计算高度（如果有的话）和元素，所以当元素含量尺寸更小，他们会占用所有剩余空间;
• 指定flex-shrink: 0要使用固定的高度所有Flex项目，使他们不会成为当元素含量的大小大于剩余空间大小大小;
• 指定overflow: hidden到所有直接父母计算高度（如果有的话），以禁用滚动和禁止显示溢出的内容;
• 指定overflow: auto要在其中滚动的元素。

JSFiddle（元素具有计算高度的直接父级）

JSFiddle（简单情况：没有具有计算高度的直接父级）

我不确定它是否可以完全使用CSS来完成，除非您对错觉有所了解。也许使用Josh Mein的答案，并将其设置#container为overflow:hidden。

对于它的价值，这是一个jQuery解决方案：

var contH = $('#container').height(),
upH = $('#up').height();
$('#down').css('height' , contH - upH);