padding-bottom 是否相对于元素的宽度？答案

【问题标题】：Is padding-bottom relative to element's width?padding-bottom 是否相对于元素的宽度？
【发布时间】：2013-10-16 12:46:37
【问题描述】：

Padding-bottom 必须是相对于元素的宽度，但我在 Chrome 和 Firefox 的最新版本中进行了测试，并且 padding-bottom 是相对于父元素的宽度。

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

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

查看示例：http://dabblet.com/gist/6898263

我能做什么？

【问题讨论】：

标签： css responsive-design aspect-ratio

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

width 和 padding 属性之间没有关联。但是，他们都依赖第三件事。它是em 单位 (documentation)。 Em 单位可用于定义所有可测量的属性（如宽度、边框宽度等），它取决于字体大小（在这种情况下应在 px 中定义）。

您可以尝试这个简单的技巧：

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

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

在您的示例中，您在内部使用了另一个div，并将所需的font-size 定义为24px，因此父级中的200px font-size 在这里不会有问题。

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

【讨论】：

谢谢很有用！
这并没有解决问题。它为假设的潜在问题提出了一种不同的方法。
@JukkaK.Korpela，这是真的。注意 hack 关键字。
很有用，但正确的是使用带有 div 的容器和宽度为 100% 的子容器和相对于父宽度的 padding-bottom。即便如此，我还是很高兴知道这些 hack。

【解决方案3】：

为什么要将填充和背景颜色添加到包装的 div 中？如果我使用以下 css 更改您的 gist 上的 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;
}

【讨论】：

因为是一个例子。在我的真实项目中，宽度是 100%，但它有一个最大宽度。我可以像您的示例一样使用多个 div：dabblet.com/gist/6898777 并且可以工作。谢谢。