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

#css #internet-explorer-8

Вопрос:

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

вот простой пример:
таблица из 3 строк с заголовком, содержимым и нижним колонтитулом;
Я бы хотел, чтобы 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, для любого Chrome (IE7 и старше не важно)
и это должно быть основано на CSS (без javascript)

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

1. Похоже, что ваш пример кода отлично работает в IE8.

2. Хорошо, это потому, что вы пробовали это в режиме quirks… но мне нужен стандартный режим (я отредактировал пример и добавил определение doctype)

Ответ №1:

вы можете удалить содержимое div из middle td и изменить стиль для middle 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, для которого вы установили значение height: 20em;

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

1- Использование такого набора фреймов

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

это создаст автоматическую высоту без javascript,

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

Мои наилучшие пожелания

1. 2. как я уже писал в своем вопросе, я хотел бы решение только для CSS (без javascript)

2. 1. возможно, вы неправильно поняли мой вопрос, я не хочу заполнять окно браузера

3. как я уже писал в своем вопросе, я хотел бы растянуть DIV по вертикали внутри ячейки таблицы. Я бы не хотел удалять DIV.

4. извините, я пытался сделать все возможное, чтобы помочь вам, но по опыту я уже пытался это сделать, но ничего не вышло, поэтому предлагаю это … в любом случае я попробую еще раз

Ответ №2:

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