Question

我有一个div（文章），它有两个子节点（header和#content_outer）。标题具有正确的高度，我希望#content_outer具有一个高度（例如：200px没有给出特定的数字），以便标题高度+ #content_outer height =文章高度。

这是一个小提琴：http://jsfiddle.net/fyNX4/

（在小提琴中#content_outer不应超过底部的文章div）

我希望解决方案只适用于css。

非常感谢。

修改

更具体地说，这是我想要的解决方案：http://jsfiddle.net/fyNX4/5/

我给了#content_outer - ＆gt;高度：240像素;

但是如果标题包含更多文本（并且具有更多高度），我想给出％或其他解决方案的高度。（http://jsfiddle.net/fyNX4/8/）

Answer 1

http://jsfiddle.net/fyNX4/9/

我必须通过添加一些不必要的标记来修改你的结构：

table:   table-row:       table-cell:       cell's content:
article  header           span
article  div#content-row  div#content-cell  div#content: overflow:auto;

table-row是必要的，因为它们是垂直订购表格单元格的唯一方法
table-cell是必要的，因为table-row不接受填充或高度。
内部包装div是必要的，因为table-cell s忽略overflow

Answer 2

你想要这样的东西：

这是更新的小提琴：http：//jsfiddle.net/fyNX4/6/

#main { width: 300px; height:300px;  background:Khaki; overflow:auto;}
#content_outer { background: GoldenRod;  height:100%; }

第二个子div高度填充父高度

2 个答案: