Question

我有一个100％高度的包装div，它包含几个div，包括一个标题，一个内容和一个页脚div。我希望这3个div总是覆盖100％的高度，而页眉和页脚有一个静态高度。例如。我希望内容div覆盖100％ - 页脚+标题的高度。我似乎无法找到解决方案。有什么想法吗？

Answer 1

CSS中的高度可能很有趣。除非父容器具有已定义的高度，否则百分比将不会执行任何操作。幸运的是，这通常很容易解决。对于大多数情况，如果你将html，body和你的包装器设置为height: 100%;（以及你的包装器可能嵌套的其他所有内容），那么你可以使用CSS3中的calc()函数。 calc()的{{3}}（大部分）相当不错。

这是一个快速Support。

主要的魔法发生在.content css规则中：

.content {
  height: calc(100% - 50px - 50px); // 100% - height of header - height of footer
}

这非常接近所谓的粘性页脚example。唯一的区别是，不是height: 100%，而是将min-height: 100%用于html，body和.wrapper。这使得页脚将始终保留在页面的底部（而不是屏幕）。如果没有足够的内容将其推到底部，它仍然在那里。然而，如果屏幕上的内容多于适合屏幕的内容，那么它就会一直向下推，直到没有内容为止。这是我最喜欢的CSS代码之一。

Answer 2

如果您在内容部分使用绝对定位，则可以占用页眉和页脚之间的完整空间：

#content{ 
    width: 100%; 
    background-color: yellow; 
    position: absolute; 
    top: 100px; 
    bottom: 100px; 
}

然后你可以使用height: 33.33333%使内容中的每个div占据高度的大约1/3（最后可能有一个像素行，因为1/3不能很好地转换为百分比）。

你可以看到完整的小提琴here

如何获得多个垂直堆叠的div，每个div覆盖父div高度的百分比？

2 个答案: