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

这是一个实验性的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 2

显示：表格可能很有用：
演示http://jsfiddle.net/GCyrillus/Vedkw/1
Firefox不喜欢它，来自显示的子项：table-row，表现得像表格单元格，逻辑

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

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

3 个答案:

修改