Высота 100% не работает для тега DIV в Internet Explorer 8 - PullRequest
Новая
       9

Высота 100% не работает для тега DIV в Internet Explorer 8

7 голосов
/ 07 октября 2009

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

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html style="background:black;height:100%;width:100%;">
    <head>
      <title>Report</title> 
    </head>
    <body style="background:black;">
      <table HEIGHT="100%" WIDTH="100%" style="background:red;">
      <tr>
      <td>
        Search Area  
      </td>
      </tr>
      <tr>
      <td HEIGHT="100%" WIDTH="100%" style="background:orange;">
        <div style="overflow-y:scroll;height:100%;">
          <table style="width:100px;height:1000px;">
          <tr>
          <td style="background:white;">
            Results Area
          </td>
          </tr>
          </table>
        </div>      
      </td>
      </tr>
      </table>
    </body>
    </html>

Но когда я установил метатег для использования форматирования IE8, добавив: 

<meta http-equiv='X-UA-Compatible' content='IE=edge' />

Нижний тег DIV расширяется за пределы страницы. Я попробовал несколько вариантов, хотя и не могу найти способ обойти это без фактического указания высоты для значений. Что не будет работать, так как я хочу, чтобы страница занимала 100% экрана независимо от размера окна браузера.

Любая помощь будет высоко ценится.

Ответы [ 5 ]

5 голосов
/ 21 декабря 2009

Этот метатег позволяет корректно отображать CSS, а в CSS - по дизайну - height:100% в основном не работает .

Необходимо указать конкретную высоту для каждого отдельного предка элемента, включая <body>, <table>, <tr> и даже <tbody> элемент, который автоматически вставляется анализатором. *

Во всяком случае, эта схема может быть достигнута более простым способом: 

.topBanner {
    position:absolute; position:fixed; 
    height:2em; 
    top:0; left:0; width:100%;
}
body {padding-top: 2em}

в IE6 это будет ухудшаться, и, в отличие от overflow, в Mobile Safari будет работать правильно.

1 голос
/ 03 января 2010

Редактировать:

Удаление объявления DOCTYPE заставит height = "100%" работать, но, тем не менее, переводит браузер в режим причуд, что нежелательно.

Вообще говоря, использование таблиц для разметки не рекомендуется, вместо этого следует использовать CSS.

Например: http://jsfiddle.net/rf649/7/

HTML 

<div id="search">Search Area</div>
<div id="results">Results Area</div>

CSS: 

#search {
    background-color: red;
    position: fixed;
    height: 150px;
    width: 100%;
}
#results{
    background-color: orange;
    position: fixed;
    top: 150px;
    width: 100%;
    bottom: 0;
    overflow: auto;
}
​
0 голосов
/ 07 октября 2009

Мое понимание кросс-браузерного CSS не такое уж большое, так что, возможно, это не лучшее решение, но это решение.

Насколько я видел, вам всегда нужно устанавливать высоту / ширину контейнера, который вы хотите переполнить, поэтому вам нужно установить их.

Чтобы разобраться с разрешением, я бы предложил вам добавить сценарий jQuery в событие onReady, которое динамически фиксировало бы высоту и ширину, чтобы переполнение работало.

0 голосов
/ 16 декабря 2009

У меня была такая же проблема, как и у вас, и, наконец, решение состояло в том, чтобы модифицировать строковую запись CSS, которая имела модификатор !important для объявления с фиксированной высотой. В коде HTML классу (определенному в CSS) присвоено height для 100%, но CSS применил !important во время загрузки стиля.

0 голосов
/ 07 октября 2009

Вы должны установить все поля и отступы для родительских элементов на ноль, чтобы получить то, что вы хотите.

Обновление: Извините, не сразу понял проблему. Намек Бена должен быть лучшим, я полагаю. :)

Обновление 2: Упс, поскольку Бен удалил свой ответ, мое первое обновление не имеет никакого смысла. Попробуйте установить рост тела на 100%, это должно решить проблему.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...