所以我正忙于制作一个水平滚动网站。容器div我们会说有一类area。它的宽度是可变的，以同样的方式，在传统网站上，平均高度可能会有所不同。填充/保证金百分比 - 可能的CSS错误？
我的网站是“垂直响应”，所以我使用了很多百分比值，包括高度，这与您在常规网站上使用百分比宽度的方式相同。
问题是，当我在我的div.area上使用百分比填充/边距时，它会根据div的宽度而不是高度计算百分比，即使设置为padding-top。
这类似于试图在普通网站的body上设置padding-left的百分比，并根据网站的高度计算填充。这是疯狂的，完全不直观。
这是一个已知的问题？或者是故意的？有没有任何CSS只有变通方法。我不希望有使用JS什么来解决这样我宁愿只设置填充在em小号
的W3C标准的东西决定了对paddings和margins任何百分比是元素的宽度的百分比，不是高度：
该百分比是相对于生成的框的包含块的宽度计算的。请注意， 'margin-top'和'margin-bottom'也是如此。如果包含块的宽度取决于此元素，则生成的布局在CSS 2.1中未定义为 。
然而，top和bottom位置由容器的高度决定的，虽然;）没有单只CSS的方式做到这一点，但如果你愿意在一些JS扔，这是完全可能的。
，我能想到的（非详尽的列表）的一些解决方案：
排量从顶部由50％（仅CSS），然后由负上边距偏移量为元素的自己的一半高度（基于JS-计算）
计算的顶部和底部内边距/利润率由JS确定容器高度
只是偶然发现了同样的问题之后。解决方案，为我的作品：
不设置宽度/高度和使用
.percent10 {
top: 10%;
left: 10%;
bottom: 10%;
right: 10%;
}