3

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

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

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

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

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

4

3 回答 3

1

Display:table 可能有用：
Demo 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
的内部内容可以滚动。

于 2013-06-03T22:39:59.297 回答
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;
}*/
于 2013-06-03T22:22:23.800 回答
0

你在找这个吗：小提琴

我认为这只有在您设置高度时才有可能#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;
}

编辑

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

如果您可以使用脚本，请参阅此小提琴

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;
}
于 2013-06-03T22:42:31.223 回答