1

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

这是我的布局结构的粗略示例：

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 标签。但我不能只是通过并添加 height: 100%; 给所有升迁的父母，因为它最终破坏了我的布局。具体来说，当我将高度 100% 添加到我的主要内容包装器 div 2 时。

这是我制作的一个jsfiddle，它很好地代表了我的问题。

4

2 回答 2

7

百分比高度是从父元素计算的，像素高度不是。这意味着只有当所有高度都需要以百分比表示时，您才需要在每个级别上设置高度。
您可以使用像素值进行设置min-height，2a2因此它不会小于该值，但它能够扩展到该值之外。然后你开始height: 100%了2a2a。这将起作用，因为父元素（2a2）具有以 px 为单位的绝对值。

编辑：
要使 3 个 div 填充容器的其余部分而不管内容如何，​​您必须使用padding-bottom、margin-bottom技巧。这是代码笔。

于 2013-01-04T21:25:46.417 回答
1

只需设置2a2'sposition: relative和2a2a's position: absolute。然后，您可以添加top: 0; bottom: 0;并将其2a2a拉伸到其父级的完整高度。

一个 jsFiddle 总是有帮助的：http: //jsfiddle.net/REh4b/

于 2013-01-04T21:25:08.483 回答