html - 如何使绝对定位的 div 占用所有可用的宽度空间？

Question

我有一个宽图像，我想在其底部绝对放置一个透明的 div。

 <div class="background">

 <img src="background.jpg" class="image">
 <div class="box">
 <p>paragraph</p>
 </div>

 </div>

CSS:

 .background {
 Position: relative;
 }

 .image {
 width: 100%;
 display: block;
 }

 .box {
 background: #CC333F;
 color: white;
 position: absolute;
 bottom: 0;
 }

问题是 .box 似乎显示为内联 block ，我希望它占据页面的所有可用宽度，但它在段落所在的位置结束。

Answer 1

像这样编辑 .box:

.box {
 background: #CC333F;
 color: white;
 position: absolute;
 bottom: 0;
 right:0;   /* added  */
 left:0;   /* added  */
 }