Родительский дист, не расширяющийся на детскую высоту

Question

Как вы увидите, у меня есть 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; 
} 

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

Answer 1

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

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

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

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

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

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

Answer 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; 
} 

Edit:

Проверить эту скрипку на более продвинутую, например, в том числе горизонтального и вертикального центра: 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; 
}