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

Question

这是我的HTML结构：

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如您所见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 padding plus 边框来计算总宽度。高度计算类似。

使用border-box，框模型包含width / height计算中的填充和边框。

（请注意，边距总是在计算之外;无论是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>

Answer 2

改为使用保证金：

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

Answer 3

只需在子类中设置宽度，高度和边距即可。父类只是包装器，它只需要特定于它的样式。即背景颜色和边框。

// returns '/../../../images/images1.jpeg'
var relativePathToImage = path.relative(
  '/app/server/api/user',           
  '/app/images/images1.jpeg');

var pathToImage = __dirname + relativePathToImage;

子类推出父类，因为您将其维度设置为固定而子项设置为100％。然后设置将孩子推出父级的填充。