如何正确地使相对定位的 div 填充绝对定位的父级答案

【问题标题】：How to correctly make a relative positioned div fill an absolute positioned parent如何正确地使相对定位的 div 填充绝对定位的父级
【发布时间】：2016-02-29 22:21:55
【问题描述】：

我最近遇到了一个奇怪的问题，像下面这样的 div 在大多数浏览器（Chrome、Edge）中的行为不像在 Firefox 中那样：

footer > div {
    display: flex;
    position: absolute;
    height: 100%;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    justify-content: flex-end;
    align-items: center;
}
footer {
    position: relative;
    display: table-row;
    height: 40px;
    background-color: gray;
}

我希望页脚内的 div 填充它的父 div，以便该 div 标签内的元素可以垂直对齐。为了让它在 chrome 中工作，我包含了以下规则

@media screen and (-webkit-min-device-pixel-ratio:0) { 
footer > div { position:relative; }
}

这个想法是垂直对齐页脚中的一些元素，而不必为其高度输入特定值（是的，我更像是一名程序员，所以我正在尽力避免必须将相同的值放在多个地方，以防需要更改）。这是如何在多个浏览器中正确完成的？

最终解决方案只需要在当前版本的 Chrome 和 Firefox 中得到支持，因此请忽略大多数其他人必须考虑的所有不支持 CSS3 和 HTML5 的 IE。我也不想使用包括 JQuery 在内的 JS 进行样式设置，因为我觉得布局是如此基本的东西，应该可以不用它来完成。

如果需要，您还可以查看此jsFiddle，它显示了布局上下文中的问题。

我想这不是真的有必要，但如果你愿意，你也可以在GitHub 上查看源代码（它是一个使用 Thymeleaf 的 Spring webapp）。

最后，如果您愿意，请随时评论设计中的其他缺陷。这是我正在为大学课程做的一个项目，所以我总是乐于改进。

非常感谢！

【问题讨论】：

FWIW 如果您从 footer 的样式中删除“display:table-row”，它在两种浏览器中的工作方式相同。这确实会导致其他问题，因此它不是“THE”解决方案，但它确实表明 Chrome 在 table-row 元素内的 flex 元素存在问题。

标签： html css google-chrome firefox css-position

【解决方案1】：

您可以通过将以下内容替换为 footer > div 来解决此问题：

top: 0;
right: 0;
left: 0;
bottom: 0;

..with:

width: 100%;
height: inherit;

您会找到updated Fiddle here。该解决方案似乎适用于所有最新的浏览器。

【讨论】：