css - 填充/边距百分比 - 可能的 CSS 错误？

Question

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

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

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

这类似于尝试padding-left在body正常站点上设置百分比并根据站点的高度计算填充。这很疯狂，而且完全不直观。

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

score 5 · Accepted Answer

W3C 标准规定填充和边距的任何百分比都是元素宽度的百分比，而不是高度的百分比：

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

但是，topandbottom位置是由容器高度决定的；) 没有单一的 CSS-only 方法可以做到这一点，但如果你愿意加入一些 JS，那是完全可能的。

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

score 0 · Accepted Answer

只是偶然发现了同样的问题。适合我的解决方案：

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

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

2 回答 2