Question

填充底部必须相对于元素的宽度，但我在最后一个版本的Chrome和Firefox中测试，padding-bottom相对于父元素的宽度。

我需要一个相对于元素宽度的元素，但它不起作用：

width: 200px;
padding-bottom: 50%; /* must be 100px  */
height: 0;

参见示例：http://dabblet.com/gist/6898263

我该怎么办？

Answer 1

不，在padding properties中，百分比是相对于containing block的宽度，这可能是body元素或div元素，没有宽度设置，因此它占用了可用的宽度。

如果将元素包装在div容器中并在容器上设置所需的宽度，则可以按预期使用百分比。

Answer 2

width和padding属性之间没有任何关联。然而，他们都依赖第三件事。这是em单位（documentation）。 Em单位可用于定义所有可测量的属性（如宽度，边框宽度等），它取决于font-size（应该在px中定义的情况）。

您可以尝试这个简单的黑客：

font-size: 200px;
width: 1em;
padding-bottom: 0.5em;

看我的小提琴：http://jsfiddle.net/Wgzrn/。

在您的示例中，您使用了另一个div内部，并将font-size定义为24px，因此父级中的200px字体大小不会出现问题。< / p>

我的解决方案不是很优雅，但我不知道其他任何一个。

Answer 3

为什么要在包装的div中添加填充和背景颜色？如果我使用下面的css更改你的要点上的CSS，我有一个100px填充。代码如下：

div.aspect-ratio {
  width: 200px;
  height: 0;
  position: relative;
}

div.aspect-ratio > div {
  padding-bottom: 50%; /* must be 100px  */
  position: absolute;
  background: blue;
  color: white;
  font-size: 24px;
  text-align: center;
}

填充底部是否相对于元素的宽度？

3 个答案: