У меня есть элемент в DOM, который просто хотел бы заполнить его родительскую ширину, независимо от того, что это такое:
<div width="800">
<div class="filler"></div>
</div>
Как я могу указать в CSS, что класс filler соответствует ширине его родительского?
.filler {
?
}
Вы пробовали: width: 100%;?
В зависимости от вашего внутреннего элемента существуют различные подходы.
Если это элемент уровня блока (абзац, div и т.д.), он автоматически настраивается, чтобы заполнить 100% ширины контейнера.
Если это встроенный элемент, слишком плохой для вас, он не примет width:100%, пока не преобразует его в элемент уровня блока: display:block.
Плавающие элементы - это особый случай: они будут охватывать только ширину их внутреннего содержимого, даже если они являются элементами уровня блока. Они требуют width:100%.
Абсолютно позиционированные элементы еще более жесткие: им нужен width:100%, но для контейнера также нужен контекст позиционирования, например. position:relative.
Примеры всех четырех случаев: http://jsfiddle.net/dD7E4/
div является блочным элементом и по умолчанию заполняет его родителя.
если вы, вероятно, не используете float:left или float:right или display:inline, или ваш родитель не имеет 800px.
(возможно, вы должны попробовать с style="width:800px" или width="800px" вместо width="800")
Обычно я устанавливаю границу цвета, чтобы увидеть, как она работает.
Если что-то не останавливает их, элементы уровня блока, такие как div и p, всегда будут заполнять всю ширину своего контейнера. Если у вас есть встроенный элемент, например span или a, вы можете создать его как display: block, чтобы превратить его в элемент уровня блока, но это также приведет к разрыву строки до и после него.