如何使絕對定位的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

您也可以添加width：100％; 如

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