如何让多个垂直堆叠的 div 分别覆盖父 div 高度的百分比？答案

【问题标题】：How to get multiple vertically stacked divs to each cover a percentage of the parent divs height?如何让多个垂直堆叠的 div 分别覆盖父 div 高度的百分比？
【发布时间】：2015-06-24 19:32:36
【问题描述】：

我有一个高度为 100% 的包装 div，其中包含多个 div，其中包括页眉、内容和页脚 div。我希望这 3 个 div 始终覆盖 100% 的高度，而页眉和页脚具有静态高度。例如。我希望内容 div 覆盖 100% - 页脚 + 页眉的高度。我似乎找不到解决方案。有什么想法吗？

【问题讨论】：

请提供您的代码。

标签： css html height

【解决方案1】：

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

这是一个快速的example。

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

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

这与所谓的粘性页脚(example) 非常接近。唯一的区别是您将使用min-height: 100% 代替height: 100% 来表示html、body 和.wrapper。这使得页脚将始终保留在页面底部（而不是屏幕）。如果没有足够的内容将其推到底部，它仍然会坐在那里。然而，如果内容多于屏幕无法容纳的内容，那么它只会不断被向下推，直到没有内容为止。这是我最喜欢的 CSS 代码位之一。

【讨论】：

【解决方案2】：

如果您在内容部分使用绝对定位，您可以让它始终占据页眉和页脚之间的全部空间：

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

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

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

【讨论】：