使用padding使子元素填满父元素的100%。

Question

我试图创建一个子 div，它能够使用父元素的宽度和高度，包括内边距。无论我尝试什么，都没成功。我尝试添加 box-sizing = border-box，但没有改变任何东西。我也尝试使用 * 将 box-sizing 添加到所有元素中，但也没有改变任何东西。 以下是我的代码：

html {
  font-size: 16px;
}

.parent {
  font-size: 1rem;
  width: 10em;
  height: 10em;
  padding: 5em;
  background-color: #f0f0f0;
}

.child {
  background-color: #ccc;
  width: 100%;
  height: 100%;
  
/* 
--= 100% should include padding =--
box-sizing: border-box; <-- this didn't change anything...
*/
}

<div class="parent">
  <div class="child"></div>
</div>

- Myzel394

---

似乎你正在尝试一些不应该以那种方式工作的事情。为什么不直接将子元素从父元素中取出或者移除父元素的填充？如果有其他需要填充的元素，则将它们包装在另一个带有填充的元素中，因此需要填充的任何内容都放在包装器中，不需要填充的则将包装器留空。 - Huangism

Answer 1

如果将子元素定位为绝对位置，则会相对于其父元素定位并超出父元素的内边距。使用 position:absolute 来实现：

.parent {
  position: relative;
  padding: 2em;
}

.child {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

---

Demonstration:

html {
  font-size: 12px;
}
body {
  margin: 1em;
}

.parent {
  position: relative;
  font-size: 1.2em;
  width: 10em;
  padding: 2em;
  margin:1em 0 0;
  background-color: blue;
  border: 5px solid red;
}

.child {
  position: relative;
  background-color: lightgreen;
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

p {
  margin: 0;
}
.red {
  color: red;
}
.blue {
  color: blue;
}
.green {
  color: green;
}

<p>Parent Border: <span class="red">Red</span></p>
<p>Parent Background: <span class="blue">Blue</span> (not visible)</p>
<p>Child Background: <span class="green">Green</span></p>

<div class="parent">
  <div class="child background"></div>
  <div class="child">This text to indicate parent's padding</div>
</div>

使用您的代码的工作示例：

html {
  font-size: 16px;
}

.parent {
  position: relative; /* ADDED */
  font-size: 1rem;
  width: 10em;
  height: 10em;
  padding: 5em;
  background-color: #f0f0f0;
}

.child {
  position: absolute; /* ADDED */
  left: 0; /* ADDED */
  top :0; /* ADDED */
  background-color: #ccc;
  width: 100%;
  height: 100%;
}

<div class="parent">
  <div class="child"></div>
</div>

---

解释：

在绝对定位模型中，一个框明确地相对于它的包含块偏移。

w3上的绝对定位

如果position属性是static或relative，则包含块由最近的块容器祖先元素的内容框的边缘形成...

如果position属性是absolute，则包含块由具有非static（fixed、absolute、relative或sticky）位置值的最近祖先元素的填充框的边缘形成。

在moz中识别包含块

我添加了强调和加粗。

更多参考：盒子模型

- showdev

---

我更喜欢这种方式，因为它不会对父级样式的数学依赖产生影响。 - isherwood

Answer 2

只有覆盖父元素的填充才能实现此目的。为此，您需要将width和height设置为calc(100% + 10em)。您还需要取反左侧和顶部填充以正确定位元素。将子级设置为position: relative，并将left和top设置为-5em。

html {
  font-size: 16px;
}

.parent {
  font-size: 1rem;
  width: 10em;
  height: 10em;
  padding: 5em;
  background-color: #f0f0f0;
}

.child {
  background-color: #ccc;
  width: calc(100% + 10em);
  height: calc(100% + 10em);
  position: relative;
  left: -5em;
  top: -5em;
}

<div class="parent">
  <div class="child"></div>
</div>

- Nick

Answer 3

您的孩子应该将其边距设置为父元素的内边距乘以-1。这将使组件移回到在父元素添加填充之前的原始位置。这可以应用于任何方向。

由于父元素添加了填充，因此父元素的大小增加了。在水平方向上，增加的大小是左填充加上右填充。在垂直方向上，是顶部填充加上底部填充。

html {
  font-size: 16px;
}

.parent {
  font-size: 1rem;
  width: 10em;
  height: 10em;
  padding: 5em;
  background-color: #f0f0f0;
}

.child {
  background-color: #ccc;
  width: calc(100% + 5em + 5em); /* parent's width + left-padding + right-padding */
  height: calc(100% + 5em + 5em); /* parent's height + top-padding + bottom-padding */
  margin: calc(5em * -1); /* The negative of parent's padding */
}

<div class="parent">
  <div class="child"></div>
</div>

在您的情况下，以下简化的子组件将足够：

.child {
  background-color: #ccc;
  width: 200%;
  height: 200%;
  margin: -5em;
}

- Kyle Shrader