CSS: как работает ширина в процентах?

Question

У меня возникла странная проблема. У меня есть один div внутри родительского div, и я даю дочернему div ширину 100%, но он не увеличивается до размера родительского div.

Родительский div не имеет установленную ширину любого вида. Поэтому мой вопрос: ширина в процентах работает только тогда, когда родительский элемент имеет заданную ширину, или все равно должен расти?

РАЗЪЯСНЕНИЯ:

Некоторым может быть интересно, как родительский div вообще имеет ширину, если он сам не имеет установленной ширины. Причина в том, что у меня есть другие братья и сестры дочернего элемента внутри родительского элемента div с установленной им шириной, поэтому родительский элемент div вырос до соответствия этим значениям ширины элемента.

ОБРАЗЕЦ КОДА:

<div id="parent-div">
    <div id="child-element" style="width: 100%">Content</div>
    <div id="sibling" style="width: 250px"></div>
</div>

Дочерний элемент не растет, чтобы встретить родительский div. Ширина 100% практически ничего не делает, что я могу сказать. Это в IE7.

Спасибо.

ПОСЛЕДУЮЩИЙ : Спасибо всем за ответы. Я занят тестированием с моей стороны. Первоначально я думал, что родительский div только растет так же широко, как и их дети, но оказывается, что я ошибся, учитывая мой пример выше, который я кодировал только для того, чтобы продемонстрировать свою проблему, которая у меня есть. В моем случае мой родительский div имеет к нему position: fixed и bottom: 1px и right: 1px. Судя по моим тестам, это меняет поведение родительского div. Он больше не растягивается автоматически на всю ширину страницы, но предполагает поведение, которое, как я думал, имело место в любом случае, то есть родительский div расширяется только настолько, чтобы вместить его самого широкого потомка. Вот такое поведение я наблюдаю сейчас, но только потому, что мой родительский div имеет фиксированную позицию.

Answer 1

Не увидев остальных ваших CSS и HTML, я предположу, что вы разместили все, что есть в вашем HTML и CSS.

В этом случае:

• parent-div определенно будет шириной страницы, то есть 100%.
• дочерний элемент также будет такой же ширины, как страница, то есть 100%, и будет внутри parent-div
• брат будет иметь ширину 250 пикселей и находиться под дочерним элементом

Если это не так, вам мешают другие HTML или CSS.

Answer 2

Как указал zneak, не забудьте сбросить модель css box ; см. эту замечательную статью о понимании модели коробки .

#parent div {
    padding: 0;
    margin: 0;
}

Просто чтобы указать, не забудьте установить

#child-element {
    display: block;
}

, как вы могли установить inline , и он не будет расширяться до 100% ширины родителя.

Я не смог воспроизвести вашу проблему, все работало просто отлично.

Answer 3

Этот снимок экрана объясняет, как показатели измеряются с помощью CSS. Извините за французов, это с моего компьютера.

отступы, поля и границы http://img524.imageshack.us/img524/5211/capturedcran20100204173.png

Где «marge» означает margin, «bordure» означает border, а «пробел» означает padding. Margin падает вокруг border, который в свою очередь падает вокруг padding, который в свою очередь падает вокруг фактического размера элемента. В этом примере (взятом из проверки тега ответа о переполнении стека <textarea>) видно, что поля нет, ширина составляет 1 пиксель, а между границей <textarea> и ее содержимым имеется отступ в 3 пикселя; и размер, который может использовать контент, исключая отступы, составляет 660x200. Этот размер соответствует свойствам CSS width и height.

Из вложенного элемента вы можете занимать только фактический размер элемента. Padding на родительском элементе заставит ваши вложенные элементы сохранить поле. Это означает, что между границей вашего вложенного элемента и границей его родительского элемента все еще может быть пространство.

Если вы хотите, чтобы ваше вложенное <div> заняло всю комнату, вы можете установить для его свойства margin значение 0px, а для свойства padding его родителя - также 0px. *

Answer 4

Это на самом деле трюк CSS. Это выглядит так:

Если вы установите родительскую позицию div в относительную, а дочернюю позицию div в абсолютную, дочерние элементы останутся внутри родительского div, даже если их позиция абсолютная.

См. Абсолютное позиционирование внутри относительного позиционирования для более подробного объяснения.

Спасибо