我有一个 div(文章),它有两个 child (header 和#content_outer)。页眉有一个正确的高度,我希望#content_outer 有一个高度(没有给出具体数字,例如:200 像素),这样页眉高度 + #content_outer 高度 = 文章高度。
这是一个 fiddle :http://jsfiddle.net/fyNX4/
(在 fiddle 中 #content_outer 不应超过底部的文章 div)
我希望解决方案仅适用于 css。
非常感谢。
编辑:
更具体地说,这是我想要的解决方案:http://jsfiddle.net/fyNX4/5/
我给了#content_outer --> height:240px;
但我想用 % 或其他解决方案给出一个高度,如果标题有更多文本(并且有更多高度),则可以应用这些解决方案。 ( http://jsfiddle.net/fyNX4/8/ )
最佳答案
我不得不通过添加一些不必要的标记来修改您的结构:
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
忽略overflow
关于css - 第二个 child div高度填充父高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11212155/