VPF::Растянуть div на всю высоту ячейки таблицы

ksnk

Дата 10.1.2012, 09:39 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

Имеется макет

Код


<!doctype html>
<head>
    <style>
html, body {
  padding:0;
    margin:0;
    overflow:hidden;
    height:100%;
}
    </style>
</head>
<html>
    <body>
        <table style="height:100%;width:100%;">
            <tr><td style="height:24px;background:blue;">&nbsp;</td></tr>
            <tr><td style="background:white;">
                <div style="height:100%;background:yellow;">&nbsp;</div>
                
                </td></tr>
            <tr><td style="height:24px;background:green;">&nbsp;</td></tr>
        </table>
    </body>
</html>

В Хроме див растягивается на всю высоту ячейки и красит её желтым. В IE(7-9) и FireFox желтым покрашена только полоса по центру.
Как можно уговорить div растягиваться на всю высоту ячейки?

Ссылка на jsFiddle

Добавлено через 3 минуты и 31 секунду
Предварительное исследование вопроса выдает ответ - "без JS - никак"

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

$дмитрий

Дата 10.1.2012, 10:10 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1037
Регистрация: 19.6.2004

Репутация: 10
Всего: 45

Код


<!doctype html>
<html>
    <body>
        <table style="height:100%;width:100%;">
            <tr><td style="height:24px;background:blue;">&nbsp;</td></tr>
            <tr><td style="background:white; height:100%">
                <div style="height:100%;background:yellow;">&nbsp;</div>
                
                </td></tr>
            <tr><td style="height:24px;background:green;">&nbsp;</td></tr>
        </table>
    </body>
</html>

ksnk

Дата 10.1.2012, 10:24 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

$дмитрий, Firefox побежден, однако IE растягивает дивчик на 100% всей высоты таблицы

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

$дмитрий

Дата 10.1.2012, 12:18 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1037
Регистрация: 19.6.2004

Репутация: 10
Всего: 45

Попробуй так

Код


<td height="100%" style="background:white;">

Сам проверить не могу, IE не пашет smile

ksnk

Дата 10.1.2012, 12:52 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

Цитата($дмитрий @ 10.1.2012, 12:18

)

<td height="100%" style="background:white;">

Сам проверить не могу, IE не пашет

То-же самое. В IE растягивается на высоту таблицы.

оно работает, если выкинуть doctype, но при этом возникает столько нестыковок в других местах, что проще заткнуть именно эту дырку javascript'ом и не латать другие...

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

SelenIT

Дата 10.1.2012, 17:10 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

Обходной финт типа такого "за решение не катит"?

Код


<!DOCTYPE html>
<html>
<head>
  <style type='text/css'>
    html, body { height: 100%; }
  </style>
</head>
<body>
    <table style="height:100%;width:100%;">
        <tr>
            <td style="height:24px;background:blue;">&nbsp;</td>
        </tr>
        <tr>
            <td style="background:white;">
                <div style="position: absolute; top: 24px; bottom: 24px; left: 0; right: 0; background:yellow;">&nbsp;</div>
            </td>
        </tr>
        <tr>
            <td style="height:24px;background:green;">&nbsp;</td>
        </tr>
    </table>
</body>
</html>

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

ksnk

Дата 10.1.2012, 17:39 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

SelenIT, Скорее всего - катит. Придется разбавить css всякими лишними z-index'ами, а в остальном достаточно бескровное, на первый взгляд, решение smile

Добавлено через 14 минут и 44 секунды
На второй взгляд - тоже катит. Боевой макет снабжается посредине и сверху-снизу ползунками, которые меняют размер отображаемых областей, так что останется дополнить ячейки релятивными дисплеями и проверить насколько оно работает в IE7 (Хорошо, что IE6 уже не нужен smile

)

P.S. А этто ... Плюсики на репутацию у нас уже не работают? Или у меня форум глючит?

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

SelenIT

Дата 10.1.2012, 18:47 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

Цитата(ksnk @ 10.1.2012, 17:39

)

дополнить ячейки релятивными дисплеями

Ой... это уже хуже. Позиционирование из ячеек не работает в FF (для частных случаев есть лекарства, но это полумеры) и глючит в IE9 (не фурычит растяжка на всю высоту ячейки — ни через top + bottom, ни через height: 100%). Вдобавок в IE7 (тудыть его) tr-ки всегда растягиваются пропорционально контенту, хоть их режь... Лично я бы, раз пошло такое дело, вообще отказался бы от таблицы и всё сделал на позиционировании (благо, как я понял, размеры верхних/нижних панелей фиксированы).

Так что плюсики правильно делают, что не торопятся smile

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »