如何使可滚动元素填充父元素剩余高度的 100%？

Question

我有一个固定高度的容器 div。它有一些内容和另一个子元素。我希望子元素在填充剩余高度时滚动。

我想出了一个似乎可行的解决方案，但我不确定它是否正确。

<style type="text/css">
  #container {height: 100px; width: 100px; border: solid; }
  #titlebar { background: gray;}
  #app-body {height: 100px; overflow: auto; background: lightblue;}    
</style>

工作fiddle。 编辑：更新小提琴以删除样式标签。

有没有更好的方法？我不喜欢在子 div 中重述容器高度。

Answer 1

显示：表格可能很有用：
演示 http://jsfiddle.net/GCyrillus/Vedkw/1
Firefox 不喜欢它，来自 display:table-row 的子项，行为类似于 table-cell，逻辑

html, body {height:100%;width:100%;margin:0;}
#container {display:table;height:100%;width:100%;}
#titlebar, #body {display:table-row;height:100%;}
/* overwrite height of titlebar */
#titlebar{height:auto;}

编辑：请稍微挖掘一下，这是一个基本布局，您可以使用它。b
#body 的内部内容可以滚动。

Answer 2

这是一个实验性的 CSS 可能性说明 - 我将容器的高度和宽度加宽以更清楚地看到它。

 #container {
      height: 200px;
      width: 200px;
      border: solid;
    overflow: auto;
  }
  #titlebar {
      background: gray;
  }
  #body {
      height:calc(100% - 4em); /* definitely non standard - the 4 em is an approximate size of the titlebar*/
      overflow: auto;
      background: lightblue;
  }

/*Old answer - disregard */

/*#container {
    height: 100px;
    width: 100px;
    border: solid;
    overflow:auto;   /* overflow belongs here *//*
}
#titlebar {
    background: gray;
}
#app-body {

    background: lightblue;
}*/

Answer 3

你在找这个吗：Fiddle

我认为这只有在您设置#body 的高度时才有可能。否则它只是流动，overflow: scroll 或overflow: hidden 对#container 无效。要设置它的高度，您必须知道/设置#titlebar 的高度。

我觉得jQuery可以轻松解决这个身高问题。

CSS

#container {
    height: 250px;
    border: solid;
    /*overflow: hidden*/ /* <-- not really needed if height of sub-elements*/
                         /* is <= child of container */
}
#titlebar {
    height: 60px;
    background: gray;
}
#body {
    height: 190px;
    overflow-y: scroll;
}

编辑

我认为仅通过 CSS 无法使 block 元素保持剩余高度，因为除非指定，否则元素会占用所需的高度而不是可用的高度。

如果您可以使用脚本，请参阅this fiddle

jQuery

var $body = $('div#body');
var h = $body.parent('div').height()
        - $body.siblings('div#titlebar').height();
$body.height(h);

CSS

#container {
    height: 250px;
    border: solid;
    overflow: hidden
}
#titlebar {
    background: gray;
}
#body {
    overflow-y: scroll;
}