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

Question

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

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

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

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

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

Answer 2

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

#container
{
   margin: 0 px;
}

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

Answer 3

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

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

Answer 4

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

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

Answer 5

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

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

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

Answer 6

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

html { height:100%; }

или

body { height:100%; }

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

Answer 7

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

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

Answer 8

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

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

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