让 div (height) 占据父级剩余高度

我问这个问题已经快两年了。我刚刚提出了解决我遇到的这个问题的 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

抽象的

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

我的要求：

当元素的内容大小小于或大于剩余空间大小时（在第二种情况下应显示滚动条），该元素应完全占用剩余空间；

该解决方案应在计算父高度且未指定时起作用；

calc() 不应该被使用，因为剩下的元素不应该知道其他元素的大小；

应该使用现代和熟悉的布局技术，例如 flexbox。

解决方案

将所有具有计算高度（如果有的话）的直接父级和指定高度的下一个父级变成 flexbox；

将 flex-grow: 1 指定给所有具有计算高度（如果有）和元素的直接父级，以便当元素内容大小较小时它们将占用所有剩余空间；

为所有固定高度的弹性项目指定 flex-shrink: 0 ，这样当元素内容大小大于剩余空间大小时，它们不会变小；

指定 overflow: hidden 对所有具有计算高度（如果有）的直接父项以禁用滚动并禁止显示溢出内容；

为元素指定溢出：自动以启用在其中滚动。

JSFiddle (element has direct parents with computed height)

JSFiddle (simple case: no direct parents with computed height)

我的答案只使用 CSS，它不使用溢出：隐藏或显示：表行。它要求第一个孩子确实有一个给定的高度，但是在你的问题中你说只有第二个孩子需要没有指定它的高度，所以我相信你应该觉得这是可以接受的。

#container { 宽度：300px;高度：300px；边框：1px 纯红色； } #up { 背景：绿色；高度：63px；向左飘浮;宽度：100% } #down { 背景：粉色；填充顶部：63px；高度：100%； box-sizing：边框框； }

查看演示 - 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;
}​

Live DEMO

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

#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;
}​

Live DEMO

注意：您说过希望 #down 高度为 #container 高度减去 #up 高度。 display:table; 解决方案正是这样做的，this jsfiddle 将非常清楚地描述这一点。

您可以使用浮动来下推内容：

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

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

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

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

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

虽然 #up 和 #down 共享顶部位置，但 #down 的内容只能在浮动 #up 的底部之后开始：

#down {
    height:100%;
}​

<div class='parent'>
  <div class='child'>
  <div class='child last'>
</div>

<style>
.parent {
  display: flex;
  flex-direction: column;

  .child {
     &.last {
        flex-grow: 1;
     }
  }
}
</style>

我不确定它是否可以纯粹用 CSS 来完成，除非你愿意用幻觉来伪装它。也许使用 Josh Mein 的答案，并将 #container 设置为 overflow:hidden。

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

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