使用填充时,定位绝对忽略父级的宽度

Question

我父母有2个div 1

.box {
  width: 960px;
  position: relative;
}
#content {
  width: 100%;
  position: absolute;
  background: yellow;
  background: 0, 0, 0, 0.5;
  padding: 30px 20%;
}

<div class="box">
  <div id="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore blanditiis veniam autem repellat consequatur hic magnam, molestiae debitis doloremque quam
  </div>
</div>

当我使用填充内容div时,它会溢出它的父级.顺便说一句,我必须使用width:100%;for,#content因为我想要内容div中的填充因为我正在使用背景颜色,所以,我该如何解决？

这是小提琴

Answer 1

使用盒子大小

*{box-sizing: border-box}

这是演示

*{box-sizing: border-box}
:root{
  padding-top: 40px
}
.box{
  width:480px;
  position:relative;
}
#content{
  width:100%;
  position:absolute;
  background:yellow;
  background:0,0,0,0.5;
  padding:30px 20%;
}

 <div class="box">
     <div id="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore blanditiis veniam autem repellat consequatur hic magnam, molestiae debitis doloremque quam
       </div>
 </div>