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 class c）％，绿色元素具有绝对头寸和保证金最高值为14％。

蓝色元素（div类d）的位置可以低于浏览器窗口的下边缘（即使它有一个87％的边距顶部和13％的高度，我认为它将是合乎逻辑的在窗口的最底部;不高或低）。

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

Answer 1

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

CSS basic box model - 8. The margin properties

请注意，在水平流程中，“margin-top”和“margin-bottom”的百分比相对于包含块的宽度，而不是高度（以及垂直流量，' margin-left'和'margin-right'是相对于高度而不是宽度的。）

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

无需使用jQuery来解决这个问题。解决方案是使用除边距之外的其他东西来进行位移。请参阅此updated example。

Answer 2

不应使用边距来定位元素，而应使用上/左/右/下。因此，将margin-top: 14%更改为top:14%

Answer 3

不幸的是，基于百分比的margin-top值不会起作用，因为它们是从包含元素的宽度计算出来的，如前所述。

如果您需要基于宽度或高度的流畅，响应性，可扩展的边距并且无法使用绝对定位，请尝试使用CSS中的视口单元。视口单元的行为与基于百分比的维度非常相似，不同之处在于它们是根据视口窗口的尺寸计算的，并将根据浏览器窗口的尺寸进行缩放和调整大小。

vw =视口宽度：此测量基于视口的宽度。值1vw等于视口宽度的1％。

vh =视口高度：此测量基于视口的高度。值1vh等于视口高度的1％。

您也可以使用百分比小数，如此 -

.container {
    margin-top: .2vw;
}

几年前，视口单元得不到广泛支持，但现在所有现代浏览器都支持它们。如果您熟悉它们，它将为您提供更多选择。

基于百分比的保证金 - 顶部和高度不一起工作

3 个答案: