растягивание div вертикально внутри ячейки таблицы - IE8 - PullRequest
Новая
       1

растягивание div вертикально внутри ячейки таблицы - IE8

2 голосов
/ 09 апреля 2011

как растянуть DIV по вертикали внутри ячейки таблицы?
Я думал height: 100% было бы хорошо
, но в некоторых ситуациях - нет (по крайней мере, в IE8)

Вот простой пример:
таблица из трех строк с заголовком, контентом и нижним колонтитулом;
Я бы хотел, чтобы DIV 'content' внутри ячейки 'content' растягивался на 100% по вертикали;это происходит в FF и Chrome, но не в IE8 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<div style="overflow: auto; height: 20em; width: 20em;">
    <table style="height: 100%; width: 100%;">
        <tr style="background-color: blue;">
            <td>
                <div>header</div>
            </td>
        </tr>
        <tr style="height: 100%;">
            <td style="background-color: yellow;">
                <div style="height: 100%; background-color: red; overflow-y: scroll;">
                    content
                </div>
            </td>
        </tr>
        <tr style="background-color: blue;">
            <td>
                <div>footer</div>
            </td>
        </tr>
    </table>
</div>

http://jsfiddle.net/mWMmy/14/

Кто-нибудь может предложить решение этой простой проблемы?он должен работать в IE8, FF в любом Chrome (IE7 и старше не важен)
и должен быть основан на CSS (без javascript)

пожалуйста, не предлагайте такие мудрости, как 'не использовать таблицыдля разметки », так как я мог бы использовать DIV с display: table и т. д. - проблема та же (в примере я использовал TABLE, TR, TD, потому что таким образом он более читабелен)

Ответы [ 3 ]

0 голосов
/ 10 апреля 2011

Это решение будет работать, если у вас не больше строк, чем указано в разметке, и вы можете контролировать высоту строк верхнего и нижнего колонтитула.Поместите положение: относительное на столе, и FF, Chrome и IE все распознают этот элемент как контейнер для абсолютно позиционированного div в пределах td.Сместите верхнюю часть div по высоте вашего заголовка и так далее.Если есть некоторая граница таблицы или отступы, вам нужно будет немного больше компенсировать с помощью свойств left, right, top и bottom. 

<!DOCTYPE html">

<html>
<head>
</head>

<body>
<div style="overflow: auto; height: 20em; width: 20em;position:relative;">
<table style="height: 100%; width: 100%;" border=0;>
    <tr style="background-color: blue;">
        <td>
            <div>header</div>
        </td>
    </tr>
    <tr style="height: 100%;">
        <td style="background-color: yellow;">
            <div style="position:absolute;top:20px;bottom:20px;left:2px;right:2px;background-color: red; overflow-y: scroll;">
                content
            </div>
        </td>
    </tr>
    <tr style="background-color: blue;">
        <td>
            <div>footer</div>
        </td>
    </tr>
</table>
</div>
</body>
</html>
0 голосов
/ 13 июля 2012

Все, что вам нужно сделать, это поставить жесткую / фиксированную высоту на тд и высоту 100% на div в тд.

0 голосов
/ 10 апреля 2011

вы можете удалить содержимое div из среднего значения td и создать стиль для среднего уровня td для прокрутки

вот так 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<div style="overflow: auto; height: 20em; width: 20em;">
    <table style="height: 100%; width: 100%;">
        <tr style="background-color: blue;">
            <td>
                <div>header</div>
            </td>
        </tr>
        <tr style="height: 100%;">
            <td style="background-color:yellow;overflow-y:scroll;vertical-align:top;">
                content
            </td>
        </tr>
        <tr style="background-color: blue;">
            <td>
                <div>footer</div>
            </td>
        </tr>
    </table>
</div>

и это для вашего вопроса, но общая высота - это высота для родительского div, как вы установили высоту: 20em;

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

1- Использование Frameset как этот 

<frameset ROWS="100px,*,100px">
  <frame src="header.htm" />
  <frame src="content.htm" />
  <frame src="footer.htm" />
</frameset>

, который сделает авто высоту без JavaScript,

2- Использование Javascript

С уважением

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

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

...