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 Web应用程序）。

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

非常感谢！

Answer 1

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

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

..用：

width: 100%;
height: inherit;

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

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

1 个答案: