Кросс-браузерный метод для подгонки дочернего элемента div по ширине

Question

Я ищу решение, которое бы поместило ребенка div в родительские width.

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

Answer 1

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

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

См .: http://jsfiddle.net/U7PhY/2/

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

Вместо этого вы можете быть заинтересованы в box-sizing: border-box.

Answer 2

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

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

Fiddle

Answer 3

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

http://jsfiddle.net/qD4zd/

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

Answer 4

Вам даже не нужно width: 100% в вашем детском div:

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

Answer 5

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

Answer 6

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