我已经阅读了大量的问题和文章，我似乎无法弄清楚这一点。
以下是我的布局结构的一个粗略示例：
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我做的很好地代表了我的问题。
答案 0 :(得分：7)
百分比高度是从父元素计算的，像素高度不是。这意味着如果所有高度都需要为百分比，则需要在每个级别 ONLY 上设置高度。
您可以使用像素值在min-height上设置2a2，因此它不会小于此值，但它可以扩展到超过该值。然后在height: 100%上设置2a2a。这将起作用，因为父元素（2a2）具有px的绝对值。
修改
要使3个div填充容器的其余部分而不管内容如何，您必须使用 padding-bottom，margin-bottom 技巧。这是codepen。
答案 1 :(得分：1)
只需设置2a2的{{1}}和position: relative的{{1}}即可。然后，您可以添加2a2a，并将position: absolute拉伸到其父级的完整高度。
jsFiddle始终有用：http://jsfiddle.net/REh4b/