css - 父级的 100% 高度。所有 parent 高度都是动态的

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 的所有子元素都向左浮动。

我找到的所有答案都是关于将父容器(包括 html 和 body 标记)添加 100% 高度的。但我不能只通过并添加 height: 100%;对于所有上升的 parent ，因为它最终打破了我的布局。具体来说，当我将高度 100% 添加到我的主要内容包装器 div 2 时。

这是一个 jsfiddle我做的很好地代表了我的问题。

Answer 1

百分比高度是根据父元素计算的，像素高度不是。这意味着如果所有高度都需要以百分比表示，则您仅需要在每个级别上设置高度。
您可以使用像素值在 2a2 上设置 min-height，因此它不会变得比该值更小，但它能够扩展到该值之外。然后在 2a2a 上设置 height: 100%。这将起作用，因为父元素 (2a2) 具有以 px 为单位的绝对值。

编辑:
要使 3 个 div 填充容器的其余部分而不考虑内容，您必须使用 padding-bottom, margin-bottom 技巧。这是 codepen .