Как установить высоту ячеек в таблице, которая расширяется, чтобы заполнить окно в IE? - PullRequest
Новая
       10

Как установить высоту ячеек в таблице, которая расширяется, чтобы заполнить окно в IE?

0 голосов
/ 08 апреля 2009

Я пытаюсь создать простой макет из одной колонки. Я хочу, чтобы верхние два ряда имели меньшую фиксированную высоту. Третий ряд должен расшириться, чтобы заполнить остальную часть страницы. Вот мой текущий источник: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <style type="text/css">
        html, body
        {
            height:100%;
            width:100%;
            border:0px;
            margin:0px;
        }
    </style>
</head>
<body>
    <table style="width:100%;height:100%;" cellpadding="0" cellspacing="0">
    <tr>
        <td style="height:50px;background:red;">Header 1</td>
    </tr>
    <tr>
        <td style="height:10px;background:blue;">Header 2</td>
    </tr>
    <tr>
        <td style="background:green;">Content</td>
    </tr>
    </table>
</body>
</html>

Это прекрасно работает в Safari, Firefox и Opera. Тем не менее, он терпит неудачу в IE6 и IE7. В этих двух браузерах первые две строки отображаются намного больше их указанных высот. Мало того, но они на самом деле динамически изменяют размеры с высотой окна браузера. Как будто IE конвертирует постоянную высоту пикселя в процентную высоту.

Для меня важно, чтобы в окне браузера не отображались полосы прокрутки, если содержимое третьей строки не достаточно велико, чтобы этого потребовать. Установка высоты 3-го

на 100% приведет к тому, что эти полосы прокрутки будут всегда появляться, поскольку высота этой строки будет фактически установлена ​​равной высоте всей таблицы (это будет 100% ее содержащего элемента). 1007 *

Удаление объявления doctype и возврат в режим причуд, похоже, устраняют проблему в IE, но мне нужно использовать переходный HTML 4.01, поскольку именно этого ожидают все другие существующие страницы в этом приложении.

Ответы [ 5 ]

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

Работает ли это:? 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <style type="text/css">
        html, body
        {
            height:100%;
            width:100%;
            border:0px;
            margin:0px;
        }
    </style>
</head>
<body>
    <table width="100%" height="100%" cellpadding="0" cellspacing="0">
    <tr>
        <td height="50" style="background:red;">Header 1</td>
    </tr>
    <tr>
        <td height="10" style="background:blue;">Header 2</td>
    </tr>
    <tr>
        <td style="background:green;">Content</td>
    </tr>
    </table>
</body>
</html>
0 голосов
/ 22 апреля 2009

Установите высоту вашего последнего td на 100%: 

    <tr>
        <td style="background:green;height:100%;">Content</td>
    </tr>
0 голосов
/ 08 апреля 2009

Как насчет добавления позиции: фиксировано к столу? Я протестировал его в IE8 и, похоже, работает.

0 голосов
/ 08 апреля 2009

Если вы используете это для размещения страницы, почему бы не использовать div вместо?

Такого рода работы: 

<style>
    .outer {
        position:relative;
        height: 100%;
        width: 500px;
        background-color: blue;
    }
    .top {
        height: 30px;
        background-color: red;
        width: 100%
    }
    .middle {
        height:30px;
        background-color: green;
        width: 100%
    }
</style>
<div class="outer">
    <div class="top">
        content1
    </div>
    <div class="middle">
        content2
    </div>
    content3
</div>
0 голосов
/ 08 апреля 2009

Вот статья для вас, в которой рассказывается, как это можно сделать. Я только что проверил пример, который они предоставили в IE 6, и он работает.

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

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

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

...