Question

所以我正在忙着制作一个水平滚动的网站。我们所说的容器div有area类。它的宽度是可变的，同样地，div的平均高度在传统网站上也是可变的。

我的网站是“垂直响应”所以我使用了很多百分比值，包括高度，就像在普通网站上使用百分比宽度一样。

问题在于，当我在div.area上使用百分比填充/边距时，即使设置padding-top，它也会根据div的宽度而不是高度来计算百分比。 / p>

这类似于尝试在普通网站的padding-left上设置百分比body，并根据网站的高度计算填充。这是疯狂的，完全不直观。

这是一个已知问题吗？还是故意的？是否有任何CSS的解决方案。我不想使用JS或其他东西来解决这样的事情我宁愿在em中设置填充

Answer 1

W3C标准规定paddings和margins的任何百分比都是元素宽度的百分比，而不是高度：

百分比是根据宽度计算的生成的框包含块。请注意，这是真的 'margin-top'和'margin-bottom'也是如此。如果包含块的话 width取决于此元素，然后生成的布局未定义在CSS 2.1中。

然而，top和bottom位置是由容器高度决定的，但是;）没有单一的CSS方法可以做到，但如果你愿意投入一些JS ，这完全有可能。

我能想到的一些解决方案（非详尽列表）：

Answer 2

偶然发现了同样的问题。解决方案对我有用：

不要设置宽度/高度并使用

.percent10 {
  top: 10%;
  left: 10%;
  bottom: 10%;
  right: 10%;
}