Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Растянуть div на всю высоту ячейки таблицы

Автор: ksnk 10.1.2012, 09:39

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

Код


<!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 растягиваться на всю высоту ячейки?

http://jsfiddle.net/Haywv

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

Автор: $дмитрий 10.1.2012, 10:10

Код


<!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

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

Автор: $дмитрий 10.1.2012, 12:18

Попробуй так

Код


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

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

Автор: ksnk 10.1.2012, 12:52

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

)

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

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

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

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

Автор: SelenIT 10.1.2012, 17:10

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

Код


<!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

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

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

)

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

Автор: SelenIT 10.1.2012, 18:47

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

)

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

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

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