第二个子div高度填充父高度 [英] Second child div height fill parent height

问题描述

我有一个div（article）有两个孩子（header和#content_outer）。标头具有正确的高度，我希望#content_outer具有高度（不指定特定数字，例如：200像素），以便标题高度+ #content_outer height = article height。

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

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

我想解决方案只有

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

我给了#content_outer - > height：240px;

但我想给一个高度与％或其他解决方案，如果标题有更多的文本（和更高的高度）可以应用。 （ http://jsfiddle.net/fyNX4/8/ ）

解决方案

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

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

  table：table-row：table-cell：cell的内容：
文章标题span 
 article div＃content-row div＃content-cell div＃content：overflow：汽车; 
  

• table-row

• table-cell c $ c> table-row 不接受填充或高度。


• 内部封装器div是必要的，因为 table-cell s忽略溢出

I have a div (article) which has two childs (header and #content_outer). Header has a correct height, and I would like #content_outer to have a height (without giving a specific number for example:200px) so that header height + #content_outer height = article height.

Here is a fiddle: http://jsfiddle.net/fyNX4/

(In the fiddle #content_outer shouldn't exceed article div in the bottom)

I would like that the solution is only with css.

Thank you very much.

EDIT:

To be more specific, this is my desired solution: http://jsfiddle.net/fyNX4/5/

I gave #content_outer --> height:240px;

But I would like to give a height with % or other solution that could apply if the header had more text (and have more height). ( http://jsfiddle.net/fyNX4/8/ )

解决方案

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

I had to modify your structure by adding some otherwise unnecessary markup:

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

• table-rows are necessary because they are the only way to order table cells vertically
• table-cells are necessary, because table-rows don't accept padding or height.
• internal wrapper div was necessary because table-cells ignore overflow

这篇关于第二个子div高度填充父高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！