Div 100% высота работает на Firefox, но не в IE

Question

У меня есть контейнер div, который содержит два внутренних div; оба должны принимать 100% ширину и 100% высоты в контейнере.

Я установил оба внутренних divs на высоту 100%. Это отлично работает в Firefox, однако в IE делители не растягиваются до 100% высоты, а только высоту текста внутри них.

Следующая упрощенная версия моей таблицы стилей.

#container 
{ 
    height: auto; 
    width: 100%; 
} 

#container #mainContentsWrapper 
{ 
    float: left; 

    height: 100%; 
    width: 70%; 
    margin: 0; 
    padding: 0; 
} 


#container #sidebarWrapper 
{  
    float: right; 

    height: 100%; 
    width: 29.7%; 
    margin: 0; 
    padding: 0; 
} 

Есть ли что-то, что я делаю неправильно? Или любые причуды Firefox/IE, которые я пропускаю?

Answer 1

Я думаю, что «отлично работает в Firefox "находится в режиме Quirks рендеринг. В режиме Стандартный режим рендеринга, который может не работать нормально и в Firefox.

Процент зависит от «содержащего блока», а не вида.

CSS Specification says

Процент рассчитывается с относительно высоты содержащего блока генерируемого бокса. Если высота содержащего блока не указана (т. Е. Это зависит от от высоты содержимого), и этот элемент не является абсолютно позиционированным, значение вычисляет значение «auto».

так

#container { height: auto; } 
#container #mainContentsWrapper { height: n%; } 
#container #sidebarWrapper { height: n%; } 

означает

#container { height: auto; } 
#container #mainContentsWrapper { height: auto; } 
#container #sidebarWrapper { height: auto; } 

Чтобы растянуть до 100% высоты окна просмотра, вам необходимо указать высоту содержащего блока (в данном случае, это #container) , Кроме того, вам также нужно указать высоту для тела и html, потому что исходный содержащий блок является «зависимым от UA».

Все, что вам нужно ...

html, body { height:100%; } 
#container { height:100%; } 

Answer 2

Вы могли бы поставить один или оба:

html { height:100%; } 

или

body { height:100%; } 

EDIT: Упс, не заметил, что они были размещены. Вам просто нужно поплавать контейнером.

Answer 3

Его трудно дать вам хороший ответ, не видя html, который вы на самом деле используете.

Вывод вывода doctype/используя режим стандартного режима? Не имея возможности заглянуть в html-репрограммирование, это было бы моим первым предположением для разницы в интерпретации html между Firefox и Internet Explorer.

Answer 4

Я не уверен, какую проблему вы решаете, но когда у меня есть два бок-боковых контейнера, которые должны быть одинаковой высоты, я запускаю небольшой javascript на загрузке страницы, который находит максимальную высоту двух и явно устанавливает другую на ту же высоту. Мне кажется, что высота: 100% может просто означать «сделать это размером, необходимым для полного содержания контента», когда то, что вы действительно хотите, «делает как размер самого большого контента».

Примечание: вам нужно будет изменить их размер еще раз, если что-то случится на странице, чтобы изменить их высоту - например, сводка валидации становится видимой или открывается складным меню.

Answer 5

Я не думаю, что IE поддерживает использование auto для установки высоты/ширины, поэтому вы можете попробовать дать это числовое значение (например, предлагает Jarett).

Также не похоже, что вы правильно очищаете свои поплавки. Попробуйте добавить это в ваш CSS для #container:

#container { 
    height:100%; 
    width:100%; 
    overflow:hidden; 
    /* for IE */ 
    zoom:1; 
} 

Answer 6

Я сделал что-то очень похожее на то, что "tvanfosson сказал, что, на самом деле с помощью JavaScript, чтобы постоянно следить за доступную высоту в окне с помощью таких событий, как OnResize , и использовать эту информацию для изменения размера контейнера соответственно (как пикселей, а не в процентах).

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

Сообщите нам, если один из ранее упомянутых решений CSS работает, поскольку это звучит как лучший способ исправить проблему.

Answer 7

Я был успешным в получении этой работы, когда я установить границы контейнера до 0:

#container 
{ 
    margin: 0 px; 
} 

помимо всех остальных стилей

Answer 8

Попробуйте это ..

#container 
{ 
    height: auto; 
    min-height:100%; 
    width: 100%; 
} 

#container #mainContentsWrapper 
{ 
    float: left; 

    height: auto; 
    min-height:100% 
    width: 70%; 
    margin: 0; 
    padding: 0; 
} 


#container #sidebarWrapper 
{  
    float: right; 

    height: auto; 
    min-height:100% 
    width: 29.7%; 
    margin: 0; 
    padding: 0; 
}