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

【问题标题】：Percentage based margin-top and height are not working together基于百分比的 margin-top 和 height 不能一起工作
【发布时间】：2014-02-17 10:56:48
【问题描述】：

这是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 代码没有按预期工作。

【问题讨论】：

标签： html css margin

【解决方案1】：

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

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

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

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

你也可以使用百分比的小数，像这样-

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

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

【讨论】：

【解决方案2】：

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

CSS basic box model - 8. The margin properties

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

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

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

【讨论】：

【解决方案3】：

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

【讨论】：