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

提问于 2024-05-03T04:51:05+08:00

浏览次

1

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

我的网站是“垂直响应”，因此我使用了很多百分比值，包括高度，就像在普通网站上使用百分比宽度一样 .

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

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

这是一个已知的问题？还是故意的？是否有任何CSS的解决方案 . 我不想在 em 中设置填充

2 回答

4
W3C标准规定paddings和margins的任何百分比都是元素宽度的百分比，而不是高度：

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

然而， top 和 bottom 位置是由容器高度决定的，但是;）没有单一的CSS方法可以做到这一点，但如果你愿意投入一些JS，这是完全可能的 .

我能想到的一些解决方案（非详尽列表）：
- 从顶部移位50％（仅限CSS），然后由负上边距偏移，该上边距是元素自身高度的一半（基于JS的计算）
- 在确定容器高度后，通过JS计算顶部和底部填充/边距
回复于 2024-05-03T04:51:05+08:00
0
只是偶然发现了同样的问题 . 适合我的解决方案：

不要设置宽度/高度和使用
```
.percent10 {
  top: 10%;
  left: 10%;
  bottom: 10%;
  right: 10%;
}
```
回复于 2024-05-03T04:51:05+08:00

相关问题