Родительский div не расширяется до высоты детей

Как вы увидите, у меня есть div (#innerPageWrapper), который обтекает divs, которые содержат контент. #innerPageWrapper также визуально действует как полупрозрачная рамка в макете.

Моя проблема заключается в том, что #innerPageWrapper не будет расширяться, чтобы соответствовать детям внутри, не говоря уже о расширении, чтобы заполнить остальную часть страницы.

Это код для #innerPageWrapper

#innerPageWrapper {
    width: 1100px;
    height: 100%;
    display: inline-block;
    padding: 0 50px 0 50px;
    background: rgba(0, 0, 0, 0.75) url(navShadow.png) repeat-x top;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-top-right-radius: 20px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-topright: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

Я пробовал много вещей (включая использование calc() для высот div) безуспешно. Я хочу избежать использования jQuery.

Ответ 1

Во-первых, вы используете height:100%;, который в вашем случае неверен. Чтобы объяснить, почему бы не использовать height:100%, отметьте эту статью;

Чтобы понять, почему, вам нужно понять, как интерпретируют браузеры высота и ширина. Веб-браузеры вычисляют общую доступную ширину как функция ширины окна браузера. Если вы не установите любые значения ширины в ваших документах, браузер автоматически поместите содержимое, чтобы заполнить всю ширину окна.

Но высота вычисляется по-разному. Фактически, браузеры не оценивают высоту вообще, если контент не настолько длинный, что он выходит за пределы порт представления (для этого требуются полосы прокрутки) или если веб-дизайнер устанавливает абсолютная высота элемента на странице. В противном случае браузер просто позволяет потоку содержимого в пределах ширины порта просмотра до тех пор, пока он заканчивается. Высота не рассчитывается вообще. Проблема возникает, когда вы устанавливаете процентную высоту для элемента, родитель элементы не имеют высоты. Другими словами, родительские элементы имеют высоту по умолчанию: auto;. Вы, по сути, спрашиваете браузер для вычисления высоты из значения undefined. Поскольку это будет равным нулевое значение, результатом является то, что браузер ничего не делает.

Во-вторых, чтобы сделать внешний-div (в данном случае #innerPageWrapper) обтеканием дочерних элементов, вы должны использовать overflow:hidden в этой оболочке.

Чтобы это было успешно выполнено, ваши дочерние элементы должны не быть position:absolute, как у вас для #contentMain и #contentSidebar, вместо этого сделайте эти float (float: left и float: right) и после #contentSidebar div закрывается, добавляет <div style="clear:both"></div>, чтобы очистить поплавки, позволяя родителям полностью обтекать их.

Я поместил требуемый CSS в this Pastebin, обратите внимание, что вы должны очистить свои поплавки с помощью div, как я упоминал выше.

Ответ 2

Попробуйте установить ширину и высоту родительского элемента в auto. Упрощенный пример:

http://jsfiddle.net/kimgysen/8nWDE/

#innerPageWrapper {
    width:auto;
    height:auto;
    background:red;
}

#innerPageWrapper p{
    width: 100px;
    height: auto;
    margin: 10px auto;
    background: yellow;
}

Изменить:

Проверьте эту скрипту для более продвинутого примера, включая горизонтальный и вертикальный центр: http://jsfiddle.net/kimgysen/8nWDE/1/

Родительский элемент будет динамически адаптироваться к границам дочерних элементов.
Вы также можете установить динамическую ширину и высоту дочерних элементов.

.outerDiv{
    display: table-cell;
    background-color: yellow;
    width: auto; 
    height: auto;
    vertical-align: middle;
    text-align: center;
}

.innerDiv{
    display: inline-block;
    background-color: red; 
    width: 100px;
    height: 100px;
    margin: 20px;
}