CSS для заполнения родителя?

У меня есть элемент в DOM, который просто хотел бы заполнить его родительскую ширину, независимо от того, что это такое:

<div width="800">
    <div class="filler"></div>
</div>

Как я могу указать в CSS, что класс filler соответствует ширине его родительского?

.filler {
    ?
}

Ответы

Ответ 1

Вы пробовали: width: 100%;?

Ответ 2

В зависимости от вашего внутреннего элемента существуют различные подходы.

Если это элемент уровня блока (абзац, div и т.д.), он автоматически настраивается, чтобы заполнить 100% ширины контейнера.

Если это встроенный элемент, слишком плохой для вас, он не примет width:100%, пока не преобразует его в элемент уровня блока: display:block.

Плавающие элементы - это особый случай: они будут охватывать только ширину их внутреннего содержимого, даже если они являются элементами уровня блока. Они требуют width:100%.

Абсолютно позиционированные элементы еще более жесткие: им нужен width:100%, но для контейнера также нужен контекст позиционирования, например. position:relative.

Примеры всех четырех случаев: http://jsfiddle.net/dD7E4/

Ответ 3

div является блочным элементом и по умолчанию заполняет его родителя.
если вы, вероятно, не используете float:left или float:right или display:inline, или ваш родитель не имеет 800px.
(возможно, вы должны попробовать с style="width:800px" или width="800px" вместо width="800")
Обычно я устанавливаю границу цвета, чтобы увидеть, как она работает.

Ответ 4

Если что-то не останавливает их, элементы уровня блока, такие как div и p, всегда будут заполнять всю ширину своего контейнера. Если у вас есть встроенный элемент, например span или a, вы можете создать его как display: block, чтобы превратить его в элемент уровня блока, но это также приведет к разрыву строки до и после него.