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

Question

我最近遇到了一个奇怪的问题，其中 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 中得到支持，所以忽略所有 IE 不支持 CSS3 和 HTML5 的公牛，大多数其他人必须考虑。我也不想使用包括 JQuery 在内的 JS 进行样式设置，因为我觉得布局是如此基本的事情，应该可以在没有它的情况下完成。

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

我想这不是必需的，但如果您愿意，也可以在 GitHub.[=15= 上查看源代码（它是一个使用 Thymeleaf 的 Spring webapp） ]

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

非常感谢！

Answer 1

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

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

..与：

width: 100%;
height: inherit;

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

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

How to correctly make a relative positioned div fill an absolute positioned parent

html

css

firefox

google-chrome

css-position