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

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%;
 }