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

百分比高度是从父元素计算的，像素高度不是。这意味着如果所有高度都需要为百分比，则需要在每个级别 ONLY 上设置高度。
您可以使用像素值在min-height上设置2a2，因此它不会小于此值，但它可以扩展到超过该值。然后在height: 100%上设置2a2a。这将起作用，因为父元素（2a2）具有px的绝对值。

修改
要使3个div填充容器的其余部分而不管内容如何，您必须使用 padding-bottom，margin-bottom 技巧。这是codepen。

Answer 2

只需设置2a2的{{1}}和position: relative的{{1}}即可。然后，您可以添加2a2a，并将position: absolute拉伸到其父级的完整高度。

jsFiddle始终有用：http://jsfiddle.net/REh4b/

父母100％的身高。所有父母身高都是动态的

2 个答案: