Possible CSS bug?
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 em s
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):
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)
Calculate top and bottom paddings/margins by JS after determining container height
just stumbled upon the same problem. solution that works for me:
dont set width/height and use
.percent10 {
top: 10%;
left: 10%;
bottom: 10%;
right: 10%;
}
下一篇: 可能的CSS错误？