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

width:100%; を追加することもできます。のように

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