Абсолютная позиция div не заполняет контейнер div css

Question

Абсолютная позиция div не заполняет контейнер div css

0

У меня есть absolute positioned div внутри контейнера div. Цвет фона абсолютного позиционного div не заполняет контейнер div. Высота контейнера div является динамической по содержанию. Как сделать цвет фона позиционированного div для заполнения контейнера div?

Html:

<div class="container">
test<br />
test<br />
test<br />

<div class="showbg">
test
</div>

</div>

CSS:

.container{ background-color:#CCCCCC;  width:300px;}
.showbg{ background-color:#FFFFFF; position:absolute; width:300px; margin-top:-65px; opacity:0.4;
filter:alpha(opacity=40);}

lifeline 30 нояб. 2013, в 10:48

Источник

0

сделать position:relative .container position:relative и удалить ненужные поля
Vikram Deshmukh 30 нояб. 2013, в 09:53
0

Что ты пытаешься сделать ? Цвет rgba () на .container может сделать это. один цвет rgba () в background-image как линейный градиент при наведении на изображение, также как и в background, сделает это тоже. Даже теневая вставка hudge с цветом fain тоже будет работать. эти варианты позволяют избежать использования дополнительного контейнера. дополнительный контейнер может быть произведен через псевдоэлемент.
G-Cyr 30 нояб. 2013, в 10:02

Теги:

html

css

html5

css3

4 ответа

Ещё вопросы

сделать position:relative .container position:relative и удалить ненужные поля
Что ты пытаешься сделать ? Цвет rgba () на .container может сделать это. один цвет rgba () в background-image как линейный градиент при наведении на изображение, также как и в background, сделает это тоже. Даже теневая вставка hudge с цветом fain тоже будет работать. эти варианты позволяют избежать использования дополнительного контейнера. дополнительный контейнер может быть произведен через псевдоэлемент.

Jing · Answer 1 · 2013-11-30T08-31-00.000Z

.container {position: relative;}
.showbg {position:absolute; top:0;bottom:0;left:0;right:0;}

Hiral · Answer 2 · 2013-11-30T07-28-00.000Z

Написать:

.container{position:relative;}
.showbg{height:100%;}

ДЕМО здесь.

Bindiya Patoliya · Answer 3 · 2013-11-30T08-49-00.000Z

Изменить стиль для абсолютного div для следующих

.showbg
{
    top:0;
    bottom:0
}

для абсолютного div с другим стилем.

Tom Chung · Answer 4 · 2013-11-30T07-17-00.000Z

Проверьте это на http://jsfiddle.net/pvr2Y/

.container {
    background-color:#CCCCCC;
    width:300px;
    position:relative;
}
.showbg {
    background-color:#FFFFFF;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    opacity:0.4;
    filter:alpha(opacity=40);
}