如何使绝对定位的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似乎显示为内联块，我希望它占用页面的所有可用宽度，但它在段落的位置结束。

Answer 1

像这样编辑.box：

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

Answer 2

你也可以 只需添加宽度：100％; 如在

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