Div 100% высоты в <td> - PullRequest
Новая
       3

Div 100% высоты в <td>

2 голосов
/ 12 мая 2011

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

Бит застрял на этом, учитывая таблицу (встроенный CSS только для демонстрации): 

<table border=1>
    <tr>
        <td valign="top">
            <table>
                <tr>
                    <td style="background:red">
                        Something here<br />
                        More
                    </td>
                </tr>
                <tr>
                    <td>
                        <div style="border:1px solid green">This needs to be 100% remaining height</div>
                    </td>
                </tr>
            </table>
        </td>
        <td style="background:blue">
            Blah<br />
            Blah<br />
            Blah<br />
            Blah<br />
            Blah<br />
            Variable<br />
            Number<br />
            Of lines!
        </td>
    </tr>
</table>

Мне нужно, чтобы div расширился до 100% высоты его содержащего div,таким образом, он соответствует общей высоте столбца blah blah blah (и для этого я предполагаю, что родительский td сначала должен быть расширен, чтобы заполнить оставшуюся высоту).

У меня здесь есть JSFiddle:

http://jsfiddle.net/WZC35/1/

Показано, что я имею в виду, гораздо понятнее.

Я могу использовать Jquery, но лучше иметь решение CSS. Я знаю, что использование таблиц сомнительно но это для плагина Jquery для отображения данных в довольно сложной компоновке, и таблицы предоставляют лучшее поддерживаемое решение и решают множество проблем выравнивания, если вы хотите увидеть этоконтекст этого см. по этой ссылке:

http://69.24.73.172/demos/eventml/default.htm

Я пытаюсь сделать так, чтобы большая фиолетово-фиолетовая коробка соответствовала высоте правого столбца.

Ответы [ 2 ]

2 голосов
/ 12 мая 2011

После просмотра ваших ссылок, я думаю, что вы могли бы использовать идеально rowspan вместо вложенных таблиц (как говорит PJP).Затем вы можете связать желаемое оформление CSS (фиолетовый фон) с тд, а не с div.Div может содержать только текст, если он вообще нужен. 

    <table border=1>
    <tr>
        <td valign="top" style="background:red">
                        Something here<br />
                        More
        </td>
        <td style="background:blue" rowspan="2">
            Blah<br />
            Blah<br />
            Blah<br />
            Blah<br />
            Blah
        </td>
    </tr>
    <tr>
        <td style="border:1px solid green">
            <div >This needs to be 100% height</div>
        </td>
    </tr>
</table>
1 голос
/ 12 мая 2011

Не могу сказать, что мне что-то нравится в этой разметке. Вложенные таблицы уродливы, а встроенные стили тоже проблематичны, но кажется, что это близко к тому, что вы хотите? 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Something here More</title>
</head>

<body>

<table border="1">
<tr>
    <td valign="top" style="height: 100%">
    <table style="height:100%">
        <tr>
            <td style="background: red;">Something here<br />
            More </td>
        </tr>
        <tr style="height:100%">
            <td style="height:100%">
            <div style="border: 1px solid green; height:100%">
                This needs to be 100% remaining height</div>
            </td>
        </tr>
    </table>
    </td>
    <td style="background: blue">Blah<br />
    Blah<br />
    Blah<br />
    Blah<br />
    Blah<br />
    Variable<br />
    Number<br />
    Of lines! </td>
</tr>
</table>

</body>

...