javascript - 防止填充导致元素溢出其父元素

Question

这是我的 HTML 结构:

.parent{
  background-color:#f7f7f7;
  width: 100px;
  height: 100px;
  border:2px solid;
}

.child{
  height: 100%;
  width: 100%;
  background-color:#cf5;
  padding: 15px;
}

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

如您所见，div.child 超出了 div.parent。这是因为 padding: 15px;。那么，我如何在 CSS 中计算它:

.child{
    height: (100% - the number of padding);
    width: (100% - the number of padding);
}

所以这是预期的结果:(注意还应该有 padding: 15px)

Answer 1

只需将 box-sizing: border-box 添加到子元素即可。

.parent {
  background-color: #f7f7f7;
  width: 100px;
  height: 100px;
  border: 2px solid;
}
.child {
  height: 100%;
  width: 100%;
  background-color: #cf5;
  padding: 15px;
  box-sizing: border-box; /* NEW */
}

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

CSS box-sizing property初始值为 content-box。这意味着盒子模型通过添加内容 plus 填充 plus 边框来计算总宽度。高度的计算类似。

使用 border-box，盒模型在 width/height 计算中包括 padding 和 border。

(请注意，边距总是在计算之外；无论是在 content-box 还是 border-box 中，它们都会被附加。)

---

第二种可能性(可以说比 box-sizing 效率低)是 CSS calc function :

.parent {
  background-color: #f7f7f7;
  width: 100px;
  height: 100px;
  border: 2px solid;
}
.child {
  height: calc(100% - 30px);  /* NEW */
  width: calc(100% - 30px);   /* NEW */
  background-color: #cf5;
  padding: 15px;
}

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