如何设置元素的高度以填充其父高度的剩余部分？答案

【问题标题】：How can I set an element's height to fill the remainder of its parent's height?如何设置元素的高度以填充其父高度的剩余部分？
【发布时间】：2013-01-23 10:59:26
【问题描述】：

到目前为止，我在 div B 中有 div A，并且 A 的高度设置为 100%，因为我希望它覆盖从它的开头到其父 div 底部的所有内容。

但是，将其高度设置为 100% 并不能按照我希望的方式执行（它只会从起点一直延伸到其父级的底部），而是将其高度设置为完全匹配它的父 div。由于 div A 从 div B 内部向下几百像素开始，这会导致 div A 在 div B 下方溢出额外的几百像素。

示例如下：

真正的诀窍是 div B 需要能够根据其内容垂直扩展，而 div A 继续填充从其垂直起点到其父级底部的区域。

还有其他方法可以考虑吗？我知道我可以使用 calc 单位，但是，在 safari 6 之前，calc 无法在 safari 上运行，这将排除很多移动设备。

【问题讨论】：

标签： css layout height html vertical-alignment

【解决方案1】：

我可能会误解你在这里想要实现的目标，但不会

overflow:hidden;

在 B 区锻炼？

【讨论】：

我在发布后几秒钟就意识到了这一点。是的，它确实奏效了。谢谢。
取决于您在 div A 中放入了多少内容，例如，足以证明使用 height:100% 的合理性，内容的底部将被隐藏。在某些情况下它可能会奏效，但不是针对问题的最佳解决方案。
没问题，很高兴你把它整理好了！ @FabrícioMatté 我可能误解了原帖，我认为 Div A 始终与其父级 - DivB 的高度相匹配？
是的，从 OP 的图像来看，div A 的高度与 B 的高度相同（由于 height:100%），但向下偏移了一点。在容器 (div B) 上使用 overflow:hidden 将隐藏 A 的底部。
我不知道，我想我接受了这个——“因为我希望它涵盖从它的开头到其父 div 的底部的所有内容”——这意味着不会再超过父级的底部。不过，我理解您的意思，将其放在页面上是一个很好的考虑因素。