Вложенная таблица высотой 100% превышает экран в IE - PullRequest
Новая
       0

Вложенная таблица высотой 100% превышает экран в IE

2 голосов
/ 20 марта 2011

Вот фрагмент кода, иллюстрирующий мою проблему: 

<!DOCTYPE HTML>
<html>
    <head>
        <style>
            html, body {height:100%;margin:0;padding:0;}
            table {border-collapse:collapse;}
        </style>
    </head>
    <body>
        <table width='100%' height='100%'>
            <tr>
                <td>
                    header
                </td>
            </tr>
            <tr>
                <td valign='top' height='100%'>
                    <table width='100%' height='100%' bgcolor='red'>
                        <tr>
                            <td>test</td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </body>
</html>

Страница, которую я сейчас создаю, имеет заголовок и таблицу под ним, таблица должна занимать все доступное вертикальное пространство, но не должна превышать высоту экрана. Приведенный выше код отлично работает в FF / Chrome / Safari, но во вложенной таблице IE действительно превышает высоту экрана точно на высоту верхнего заголовка, что вызывает вертикальную полосу прокрутки, что является нежелательным поведением.

Как это можно исправить?

Ответы [ 2 ]

2 голосов
/ 20 марта 2011

IE плохо разбирается в высотах в таблицах. В этом случае он устанавливает высоту ячейки равной 100% основного текста и HTML, а не его родительский контейнер. Самая простая вещь, но также и неприятный хак, это поставить

<!–- For Internet Explorer -–> на строке выше <!DOCTYPE HTML>

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

0 голосов
/ 20 марта 2011

Изменение 

html, body {height:100%;margin:0;padding:0;}

до 

html, body {height:100%;margin:0;padding:0; overflow-y: hidden;}

Это удалит вертикальную полосу прокрутки из IE (или любого веб-браузера)

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

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

...