如何让一个绝对定位的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的似乎显示为inline-block的，我希望它采取网页上的所有可用的宽度，但结束正确的地方不段。

Answer 1

您还可以 只需添加宽度：100％; 在

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

Answer 2

编辑.box这样的：

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