填充/保证金百分比-可能的CSS错误?

Cal*_*vin 1 css css3

因此,我正忙于制作一个水平滚动的网站。div我们要说的容器具有的类area。它的宽度是可变的,就像div在常规站点上平均高度的可变方式一样。

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

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

这类似于尝试padding-leftbody正常网站的上设置百分比,并根据网站的高度计算出填充量。这很傻,而且完全不直观。

这是一个已知的问题?还是故意的?还有任何仅CSS的解决方法。我不想使用JS或类似的东西来解决我宁愿只是在ems中设置padding

Ter*_*rry 5

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

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

但是,top和的bottom位置由容器的高度决定;虽然)没有唯一的CSS方式,但是如果您愿意使用一些JS,那是完全可能的。

我可以想到的一些解决方案(非详尽列表):

  1. 从顶部偏移50%(仅CSS),然后由负的上边距偏移,该边距是元素自身高度的一半(基于JS的计算)

  2. 确定容器高度后,用JS计算顶部和底部的填充/边距