如何讓一個絕對定位的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 */ 
}