让孩子用填充填充父母的100％

Question

我正在尝试使用父母宽度和高度的100％（包括填充）来制作子div 。 无论我尝试什么，都行不通。 我试图添加box-sizing = border-box但是没有任何改变。 我还尝试使用*将框大小添加到所有元素，但也没有任何改变。 这是我的代码：

 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> 

Answer 1

如果相对于父级绝对放置，则子级将放置在其父级填充的外部。 使用position:absolute像这样：

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

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

---

示范：

 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> 

---

一个解释：

在绝对定位模型中，框相对于其包含的block明显偏移。

W3绝对定位

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

如果position属性是absolute ，则包含块的位置由最接近祖先元素的填充框的边缘形成，该边缘的位置值不是静态值（固定值，绝对值，相对值或粘性值）。

识别包含块@ moz

重点和粗体由我补充。

进一步参考： 箱型

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>