Question

我有父母的2个div 1

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

以下是fiddle

Answer 1

使用box-sizing

*{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>

Answer 2

你应该使用position:relative ...

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

2 个答案: