padding-top 作为百分比与父宽度的关系如何？答案

【问题标题】：How is padding-top as a percentage related to the parent's width?padding-top 作为百分比与父宽度的关系如何？
【发布时间】：2013-07-11 08:47:11
【问题描述】：

这是一个例子：

http://jsfiddle.net/QZAd8/1/

请注意所有红色 div 是相同的 height 和 padding-top:100%;，但它们 A 和 B 具有不同的填充大小......并且似乎 父级的宽度更改此值（请注意，C 更改了父级的 height，但这不会更改填充）。

为什么padding和宽度有这种关系？

编辑：由于历史原因，如果 jsfiddle 消失，我在示例中使用的代码如下...

.outer {
  background-color: green;
  height: 300px;
  width: 70px;
  float: left;
  margin-right: 10px;
}

.middle {
  background-color: red;
  height: 100px;
  width: 50px;
  padding-top: 100%;
}

.inner {
  background-color: blue;
  height: 3px;
  width: 100%;
}

<div class='outer'>
  <div class='middle'>
    A
    <div class='inner'>
    </div>
  </div>
</div>

<div class='outer' style='width:100px'>
  <div class='middle'>
    B
    <div class='inner'>
    </div>
  </div>
</div>

<div class='outer' style='height:400px'>
  <div class='middle'>
    C
    <div class='inner'>
    </div>
  </div>
</div>

【问题讨论】：

标签： css

【解决方案1】：

来自CSS fluid layout: margin-top based on percentage grows when container width increases：

在 CSS 中，所有四个 margin: 和 padding: 百分比都是相对于宽度的......即使这看起来很荒谬。这就是 CSS 规范的方式，你无能为力。

Straight from the horse's mouth:

'padding-top', 'padding-right', 'padding-bottom', 'padding-left'
Value:      <padding-width> | inherit
Initial:    0
Applies to:     all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column
Inherited:      no
Percentages:    refer to width of containing block
Media:      visual
Computed value:     the percentage as specified or the absolute length

百分比：指包含块的宽度

【讨论】：

不错。多么出乎意料...感谢您找到这个！

【解决方案2】：

只是因为它应该是这样的:) http://www.w3.org/TR/CSS2/box.html#propdef-padding-top

【讨论】：

保持盒子的比例很有用

【解决方案3】：

填充百分比确实是相对于宽度的，但具体来说，padding: 100%也可以读作padding: *width-of-container*px。

A 和 C 块的宽度为 70px。应用padding: 100% 与padding: 70px 相同

【讨论】：

【解决方案4】：

一个元素的高度依赖于它的内容，包括它的子元素的内边距和边距，所以如果子元素依赖于它的父元素的高度，这将是一个循环。

【讨论】：

【解决方案5】：

如果您像我一样来这里寻找替代方案，您可以使用 CSS 计算将 padding-top 设置为垂直高度的百分比：

padding-top: calc(.25 * 100vh);

【讨论】：

100vh 是屏幕的高度——你可能是指 100vw，宽度是多少？