父母100%的身高.所有父母身高都是动态的

Question

我已经阅读了大量的问题和文章,我似乎无法弄清楚这一点.

这是我的布局结构的一个粗略示例:

body  
- div 1 (header)  
- div 2 (main content wrapper)  
- - div 2a  
- - - div 2a1  
- - - div 2a2  
- - - - div 2a2a (this div needs to fit 100% height of it's parent - div 2a2)  
- - - div 2a3  
- - div 2b  
- div 3 (footer)

我认为我的主要问题源于2a的所有子元素都向左浮动的事实.

我发现的所有答案都谈到了添加100%高度的父容器,包括html和body标签.但我不能只是通过增加高度:100%; 所有每个提升的父母,因为它最终打破了我的布局.具体来说,当我将100%的高度添加到我的主内容包装器时,div 2.

这是我制作的一个jsfiddle,很好地代表了我的问题.

Answer 1

百分比高度是从父元素计算的,像素高度不是.这意味着你将需要设置高度在每个级别只有当所有的高度需要在百分比.
您可以设置min-height在2a2同一个像素值,所以它不会得到任何比这更小,但它能够扩展超过该值.然后你就开始height: 100%了2a2a.这将起作用,因为父元素(2a2)具有px的绝对值.

编辑:
要使3个div填充容器的其余部分,无论内容如何,​​您必须使用padding-bottom,margin-bottom技巧.这是codepen.