Почему высота: 100% это размер содержащего блока, а в IE это высота окна? - PullRequest
Новая
       3

Почему высота: 100% это размер содержащего блока, а в IE это высота окна?

1 голос
/ 25 мая 2011

У меня есть что-то вроде этого: 

<table style="height:100%">
<tr><td style="height:250px;"></td></tr>
<tr><td style="height:100%;"><div style="height:100%;"></div></td></tr>
</table>

В Firefox это работает хорошо, таблица соответствует размеру окна, а второй tr заполняет оставшееся пространство снизу, но в IE divсо второго тд имеет высоту окна и это вызывает полосу прокрутки.

Вот код: http://jsbin.com/uruki4

1 Ответ

1 голос
/ 25 мая 2011

Вы можете лучше использовать div вместо таблицы.Следующий код работает в Safari 5, IE7 + и Chrome: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title></title>
        <style type="text/css">
        * { margin:0; padding:0 }
        #fixed, #fill { position:absolute; width:100% }
        #fixed { top:0; height:250px; background:red }
        #fill { top:250px; bottom:0 }
        #fill iframe { position:absolute; bottom:0 }
        </style>
    </head>
    <body>
        <div id="fixed"></div>
        <div id="fill">
            <iframe src="http://google.com" width="100%" height="100%" frameborder="0"></iframe>
        </div>
    </body>
</html>

Убедитесь, что вы включили тип документа, так как иначе IE не будет использовать стандарт.Другие браузеры делают это по умолчанию.

...