这是JSFiddle链接。这是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）％，绿色元素具有绝对位置，并且保证金最高值为14％。
蓝色元素（div类d）的位置可以低于浏览器窗口的下边缘（即使它的边距顶部为87％，高度为13％，在我看来，将其放置在窗口的底部；不能更高或更低）。
到底是怎么回事？我希望将元素精确定位在浏览器窗口的边缘，在窗口大小更改时自动调整大小，并且不重叠）。我计划使用jQuery使垂直和水平边距匹配。但是现在，我需要了解为什么我的CSS代码无法按预期工作。
如果您正在寻找发生这种现象的原因：
请注意，在水平流中，“ margin-top”和“ margin-bottom”上的百分比是相对于包含块的宽度而不是高度（在垂直流中，是“ margin-left”和“ margin-right”是相对于高度而不是宽度）。
重点已添加。这些margin-top值是相对于body元素的宽度的。在这种情况下，如果水平调整窗口的大小，则元素的高度不会改变，而margin-top值会改变。导致垂直对齐问题。
无需使用jQuery即可解决此问题。解决方案是使用除边距以外的其他方式进行位移。请参阅此更新的示例。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句