Как сделать так, чтобы абсолютно позиционированный div занимал все доступное пространство ширины?

Question

Как сделать так, чтобы абсолютно позиционированный div занимал все доступное пространство ширины?

0

У меня широкий образ, который я хочу абсолютно позиционировать прозрачным 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, кажется, отображается как встроенный блок, я хочу, чтобы он взял всю доступную ширину страницы, но заканчивается прямо там, где это делается.

Magdi Gamal 19 окт. 2013, в 15:21

Источник

Теги:

html

css

2 ответа

1

изменить .box следующим образом:

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

Mohsen Safari 19 окт. 2013, в 09:55

0

Да, это было сделано, спасибо.
Magdi Gamal 19 окт. 2013, в 12:40
0

@MagdiGamal: добро пожаловать
Mohsen Safari 19 окт. 2013, в 12:41

Ещё вопросы

melc · Accepted Answer · 2013-10-19T11-32-00.000Z

Вы также можете просто добавить ширину: 100%; как в

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