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

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

Я устанавливаю оба внутренних divs на высоту 100%. Это отлично работает в Firefox, однако в IE divs не растягиваются до 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, которые я пропускаю?

Ответ 1

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

процент зависит от "содержащего блока", а не от просмотра.

Спецификация CSS говорит

Процент рассчитывается с помощью относительно высоты сгенерированного блок, содержащий блок. Если высота содержащего блока не явно указано (т.е. зависит от на высоте содержимого), и этот элемент не совсем позиционируется, значение вычисляет значение "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%; }

Ответ 2

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

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

Ответ 3

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

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

Ответ 4

Мне удалось добиться этого, когда я установил поля контейнера в 0:

#container
{
   margin: 0 px;
}

в дополнение ко всем вашим другим стилям

Ответ 5

Возможно, вам придется поместить один или оба из них:

html { height:100%; }

или

body { height:100%; }

РЕДАКТИРОВАТЬ: Упс, не заметил, что они были размещены. Вам просто нужно поплавать контейнером.

Ответ 6

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

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

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

Ответ 7

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

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

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

Ответ 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;
}