如何使可滚动元素填充父元素剩余高度的100％？ [英] How to make a scrollable element fill 100% of the remaining height of a parent element?

问题描述

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

I have a container div that is a fixed height. It has some content and another child element. I would like the child element to scroll when it has filled the remaining height.

我想出了一个似乎可以工作的解决方案，但我不确定正确。

I came up with a solution that seems to work, but I'm not sure it is correct.

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

工作小提琴。

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

Is there a better way? I don't like restating the container height in the child div.

推荐答案

显示：表格可能有用：

Demo http://jsfiddle.net/GCyrillus/Vedkw/1

Firefox不喜欢它，孩子from display：table-row，表现为表格单元格，逻辑

Display:table could be usefull:
Demo http://jsfiddle.net/GCyrillus/Vedkw/1
Firefox dislike it, child from display:table-row, behaves like table-cell, logic

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

编辑：请稍等，这是一个基本的布局，你可以使用it.b

#body的内部内容可以滚动。

digg a little please, THIS is a basic layout and you can use it.b
Inner content of #body can scroll .

这篇关于如何使可滚动元素填充父元素剩余高度的100％？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！