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

Я думаю, что «отлично работает в Firefox» только в режиме рендеринга Quirks mode. В стандартном режиме это может не работать и в Firefox.

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

Согласно спецификации CSS

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

so

#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%; }

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

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

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

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

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

#container
{
   margin: 0 px;
}

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

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

html { height:100%; }

or

body { height:100%; }

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

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

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

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

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

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

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

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

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