Таблица со строкой 100% высоты и Internet Explorer 9 - PullRequest
Новая
       0

Таблица со строкой 100% высоты и Internet Explorer 9

10 голосов
/ 03 августа 2011

У меня есть следующий пример: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Example</title>
</head>
<BODY>
<DIV style="height:150px;background-color:#AAAAFF;overflow:auto">
<TABLE style="height:100%;width:300px">
    <TR>
        <TD style="background-color:orange">Text with an unknown height (22px here)</TD>
    </TR>
    <TR style="height:100%">
        <TD style="height:100%;background-color:yellow">
            <TEXTAREA style="height:100%;-moz-box-sizing:border-box" COLS=30 ROWS=4>Remaining space (150px with IE9, 122px with others)</TEXTAREA>
        </TD>
    </TR>
</TABLE>
</DIV>
</BODY>
</html>

Он отлично работает, используя Chrome, Firefox или Internet Explorer в режиме причуд, но IE9 в стандартном режиме рисует текстовую область с той же высотой, что и корневой div.Так есть ли способ без использования JS, чтобы сказать браузеру рисовать текстовую область, используя все оставшееся пространство?Я безуспешно пытался использовать div с атрибутами float, div с атрибутом отображения таблицы, div с атрибутом фиксированной позиции.Конечно, с Javascript или если первая строка имеет постоянную известную высоту, есть несколько рабочих решений.

Есть предложения?

Ответы [ 5 ]

4 голосов
/ 08 марта 2013

Насколько я знаю, Internet Explorer ищет первый родительский элемент, у которого hasLayout сработал, чтобы вычислить высоту 100%. Это отличается от большинства других браузеров. Документация по свойству hasLayout в Internet Explorer:

Для начала, есть два набора элементов.

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

Как правило, элементы в динамическом HTML-движке Internet Explorer не являются ответственность за организацию себя. Элемент div или p может иметь положение в исходном порядке и поток документа, но их содержимое упорядочено по ближайшему предку с макетом (часто тело). Эти элементы полагаются на макет предка, чтобы сделать весь тяжелый подъем определения размера и информации об измерениях для них.

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

Быстрый способ решить вашу проблему - добавить элемент div внутри вашего td, который имитирует размер td, но из-за своей природы запускает hasLayout (не тестировалось, jsFiddle on IE8 совместимость нарушена): 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Example</title>
</head>
<BODY>
<DIV style="height:150px;background-color:#AAAAFF;overflow:auto">
<TABLE style="height:100%;width:300px">
    <TR>
        <TD style="background-color:orange">Text with an unknown height (22px here)</TD>
    </TR>
    <TR style="height:100%">
        <TD style="height:100%;background-color:yellow">
                <div style="height: 100%; width: 100%; position: relative;">
                    <TEXTAREA style="height:100%;-moz-box-sizing:border-box" COLS=30 ROWS=4>Remaining space (150px with IE9, 122px with others)</TEXTAREA>
                </div>
        </TD>
    </TR>
</TABLE>
</DIV>
</BODY>
</html>
1 голос
/ 28 февраля 2013

Требуется ли вам свойство height:150px; на DIV, если нет, переместите его на TABLE:

Смотрите здесь для JSFiddle: 

<DIV style="background-color:#AAAAFF;overflow:auto">
<TABLE style="height:150px;width:300px">
<TR>
    <TD style="background-color:orange">Text with an unknown height (22px here)</TD>
</TR>
<TR style="height:100%">
    <TD style="height:100%;background-color:yellow">
        <TEXTAREA style="height: 100%; width: 100%; -moz-box-sizing: border-box; border: 0pt none; padding: 0pt; margin: 0pt;">Remaining space (150px with IE9, 122px with others)</TEXTAREA>
    </TD>
</TR>
</TABLE>
</DIV>
0 голосов
/ 07 марта 2013

Я не думаю, что вы должны использовать таблицы для макета в первую очередь. Переключитесь на <div>, <span> и наборы контейнеров HTML5.

0 голосов
/ 01 марта 2013

Может быть, этот код поможет вам ...

Я проверяю это в jsfiddle: http://jsfiddle.net/mHTTM/5/

В IE , если вы носите 100-процентный дочерний тег, ширина / высота будет равна ширине / высоте верхнего родительского тега. Не родительский тег. Так что вам просто нужно изменить дочерние теги с процента на пиксель. 

<DIV style="height:150px;background-color:#AAAAFF;overflow:auto">
<TABLE style="height:100%;width:300px">
<TR>
    <TD style="background-color:orange">Text with an unknown height (22px here)</TD>
</TR>
<TR style="auto">
    <TD style="height:122px;background-color:yellow">
        <TEXTAREA style="height:100%;-moz-box-sizing:border-box" COLS=30 ROWS=4>Remaining space (150px with IE9, 122px with others)</TEXTAREA>
    </TD>
</TR>
</TABLE>
</DIV>
0 голосов
/ 03 августа 2011 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Example</title>
</head>
<BODY>
<DIV style="height:150px;background-color:#AAAAFF;overflow:auto">
<TABLE style="height:100%;width:300px">
<TR>
    <TD style="background-color:orange">Text with an unknown height (22px here)</TD>
</TR>
<TR style="height:100%">
    <TD style="height:100%;background-color:yellow">
        <TEXTAREA style="height: 100%; width: 100%; -moz-box-sizing: border-box; border: 0pt none; padding: 0pt; margin: 0pt;">Remaining space (150px with IE9, 122px with others)</TEXTAREA>
    </TD>
</TR>
</TABLE>
</DIV>
</BODY>
</html>
...