Метод перекрестного браузера для установки дочернего div в его родительскую ширину

Я ищу решение для установки дочернего элемента div в него parent width.

Большинство решений, которые я видел здесь , не совместимы с несколькими браузерами (например, display: table-cell; не поддерживается в IE <=8).

Ответ 1

Решение состоит в том, чтобы просто не объявлять width: 100%.

По умолчанию используется width: auto, который для элементов уровня блока (например, div) будет принимать доступное "полное пространство" (отличное от того, как это делает width: 100%).

Смотрите: http://jsfiddle.net/U7PhY/2/

На всякий случай это уже не ясно из моего ответа: просто не устанавливайте width для дочернего div.

Ответ 2

Вы можете использовать свойство box-sizing css, это crossbrowser (ie8 + и все реальные браузеры) и довольно хорошее решение для таких случаев:

#childDiv{
   box-sizing: border-box;
   width: 100%; //or any percentage width you want
   padding: 50px;
}

Fiddle

Ответ 3

Вам даже не нужно width: 100% в дочернем div:

http://jsfiddle.net/DanielDZC/w2mev/1/

Ответ 4

Если вы поместите position:relative; на внешний элемент, внутренний элемент поместится в соответствии с этим. Тогда a width:auto; на внутреннем элементе будет таким же, как и ширина внешнего.

Ответ 5

В вашем изображении вы помещаете дополнение вне ребенка. Это не тот случай. Заполнение добавляет ширину элемента, поэтому, если вы добавите прокладку и дадите ей ширину 100%, она будет иметь ширину 100% + отступы. Для того, что вы хотите, вам просто нужно либо добавить дополнение к родительскому div, либо добавить маркер во внутренний div. Поскольку divs являются блочными элементами, они автоматически расширяются до ширины их родительского элемента.

Ответ 6

Если вы хотите использовать это пространство заполнения, то вот что-то:

http://jsfiddle.net/qD4zd/

Все цвета являются цветами фона.