可能的CSS错误？

2018-06-27 04:40:36

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

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

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

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

这是一个已知的问题？或者是故意的？有没有任何CSS只有变通方法。我不希望有使用JS什么来解决这样的事情，我宁愿只设置在填充em小号

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

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

然而， top和bottom位置由容器高度决定，但是没有单一的CSS方法来完成它，但是如果你愿意抛出一些JS，那完全有可能。

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

从顶部位移50％（仅限CSS），然后被负顶部边距（这是元素自身高度的一半）（基于JS的计算）抵消，

确定容器高度后，由JS计算顶部和底部填充/边距

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

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

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

链接地址: http://www.djcxy.com/p/76029.html