Question

我希望蓝色div不会溢出红色div，而是始终填充父级。我检查了stackoverflow，他们建议使用height：100％，但是由于孩子有填充物，所以它会溢出。如何在不更改父类样式的情况下做到这一点？

.parent {
  background: red;
  height: 150px;
  width:300px;
}
.child{
  height: 100%;
  padding:20px;
  width:100px;
 background: blue; 
}

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

Answer 1

添加box-sizing: border-box; more info

* {
    box-sizing: border-box;
}

* {
    box-sizing: border-box;
}
.parent {
  background: red;
  height: 150px;
  width:300px;
}
.child{
  height: 100%;
  padding:20px;
  width:100px;
 background: blue; 
}

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

Answer 2

您可以使用box-sizing: border-box;，也可以计算像height: calc(100% - 40px */ Your padding */这样的孩子的身高

解决方案1

* {
  box-sizing: border-box;
}

.parent {
  background: red;
  height: 150px;
  width: 300px;
}

.child{
  height: 100%;
  padding: 20px;
  width: 100px;
  background: blue;
}

解决方案2

.parent {
  background: red;
  height: 150px;
  width: 300px;
}

.child{
  height: calc(100% - 40px);
  padding: 20px;
  width: 100px;
  background: blue;
}

CSS填充父级

2 个答案: