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.

Спасибо.

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

Answer 1

Это на самом деле трюк css. Это происходит следующим образом:

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

См.: Absolute Positioning Inside Relative Positioning для получения более подробного объяснения.

Thanks

Answer 2

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

padding, margin and border http://img524.imageshack.us/img524/5211/capturedcran20100204173.png

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

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

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

Answer 3

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

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

• родитель-ДИВ, безусловно, будет в ширине страницы, то есть 100%.
• ребенок элемент также будет иметь ширину страницы, то есть 100%, и быть внутри родительским DIV
• родственных будет иметь ширину 250px и быть под ребенком-элемент

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

Answer 4

Как указано zneak, не забудьте указать сбросьте модель css box; см. this great article on understanding the box model.

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

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

#child-element { 
    display: block; 
} 

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

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