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

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

html { height:100%; }

или же

body { height:100%; }

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

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

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

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

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

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

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

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

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

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

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

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

#container
{
   margin: 0 px;
}

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

Я думаю, что «отлично работает в Firefox» есть только в рендеринге Режим причуд. При рендеринге Стандартный режим это может не работать и в Firefox.

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

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

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to '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%; }

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

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