填充/保证金百分比 - 可能的CSS错误？ [英] Padding/Margin Percentages - Possible CSS bug?

问题描述

所以我正忙着做一个水平滚动的网站。容器 div 我们会说有 area 的类。它的宽度是可变的，以同样的方式平均 div 的高度在常规网站上是可变的。

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

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

这类似于尝试设置百分比 padding -left 在正常网站的正文上，并根据网站的高度计算填充。这是bonkers和完全不直觉。

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

解决方案

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

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

然而， top 和 bottom 位置由容器高度决定;）没有单个CSS-只有这样做，但如果你愿意抛出一些JS，这是完全可能的。

我可以想到的一些解决方案（非穷举列表）：

1. 从顶部位移50％（仅限CSS），然后由负顶部边距（即元素自身的一半）

So I'm busy making a horizontally scrolling site. The container div we'll say has a class of area. It's width is variable, in the same way an average div's height would be variable on a conventional site.

My site is "vertically responsive" so I'm using a lot of percentage values, including heights, in the same way you would use percentage widths on a usual site.

The problem is that when I use percentage padding/margin on my div.area it calculates the percentage based on the width of the div as opposed to the height, even when setting padding-top for example.

This is akin to trying to set a percentage padding-left on the body of a normal site and having the padding calculated based on the height of the site. It's bonkers and completly unintuitive.

Is this a known issue? Or is it intentional? And are there any CSS-only work-arounds. I don't want to have to use JS or something to solve something like this I'd rather just set padding in ems

解决方案

The W3C standards dictate that any percentages for paddings and margins are a percentage of the element's width, not height:

The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.

However, the top and bottom positions are determined by the container height, though ;) There is no single CSS-only way to do it, but if you are willing to throw in some JS, that's entirely possible.

Some solutions that I can think of (non-exhaustive list):

1. Displacement from top by 50% (CSS only), and then offset by negative top margin that is half of the element's own height (JS-based calculation)

2. Calculate top and bottom paddings/margins by JS after determining container height

这篇关于填充/保证金百分比 - 可能的CSS错误？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！