html - 基于百分比的 margin-top 和 height 不能一起工作

Question

这是 JSFiddle link .这是 CSS 代码:

body, html {
    background-color: #EAEAEA;
    height: 100%;
    margin-right: 0;
    margin-left: 0;
    padding-right: 0;
    padding-left: 0;
    padding-top: 0;
    margin-top: 0;
    overflow: hidden;
}

.a {
    position: absolute;
    height: 13%;
    background-color: #070000;
    width: 86%;
}
.b {
    position: absolute;
    height: 86%;
    background-color: #FF0000;
    width: 13%;
    margin-left: 87%;
}
.c {
    position: absolute;
    height: 86%;
    margin-top: 14%;
    background-color: #00FF00;
    width: 13%;
}
.d {
    position: absolute;
    height: 13%;
    margin-top: 87%;
    background-color: #0000FF;
    width: 86%;
    margin-left: 14%;
}

我一直在制作一个包含 4 个元素的页面，我遇到的问题是在调整浏览器窗口大小时，元素的宽度(以及它们之间的边距)如我所料发生变化，但由于某种原因，元素可以开始垂直重叠，即使黑色元素(div 类 a)的高度为 13%，绿色元素的高度为 86(div 类 c)%，并且绿色元素有一个绝对位置和 margin-top 值为 14%。

蓝色元素(div 类 d)可以低于浏览器窗口的下边缘(即使它的顶部边距为 87% 且高度为 13%，但在我看来它应该位于在窗口的最底部；不高于也不低于)。

这是怎么回事？我希望元素精确定位在浏览器窗口的边缘，在窗口大小变化时自动调整大小并且不重叠)。我计划使用 jQuery 来使垂直和水平边距匹配。但现在，我需要了解为什么我的 CSS 代码没有按预期工作。

Answer 1

如果您正在寻找发生此行为的原因:

CSS basic box model - 8. The margin properties

Note that in a horizontal flow, percentages on ‘margin-top’ and ‘margin-bottom’ are relative to the width of the containing block, not the height (and in vertical flow, ‘margin-left’ and ‘margin-right’ are relative to the height, not the width).

添加了强调。这些 margin-top 值是相对于 body 元素的宽度的。在这种情况下，如果水平调整窗口大小，元素的高度不会改变，但 margin-top 值会改变；导致垂直对齐问题。

不需要使用 jQuery 来解决这个问题。解决方案是使用边距以外的东西进行位移。看这个updated example .