html - 如何正确地使相对定位的 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 上查看源代码(这是一个使用 Thymeleaf 的 Spring webapp) .

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

非常感谢!

Answer 1

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

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

..与:

width: 100%;
height: inherit;

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