Сделать высоту заполнения таблицы HTML, охватывающего TD с CSS? ⇐ Html

[Anonymous]

У меня есть таблица, где первая ячейка во втором ряду имеет контент, созданный компонентом JavaScript, что означает, что я не знаю его высоты и ширины-но в приведенном приведенном фрагменте я моделирую его окончательный размер с
Просто установите ширину и высоту вашей таблицы на 100%. Но родительский девтатель таблицы должен иметь назначенную высоту, если ячейки пусты, они не займут никакого вертикального пространства без указанного высоты. и высота: наследуя

Код: Выделить всё

s

tr имеет

Код: Выделить всё

height: 1px

[/b] (это все равно игнорируется)
Затем установите td

Код: Выделить всё

height: inherit

[/b]
Затем установите div на

Код: Выделить всё

height: 100%< /code> < /strong> < /p>
< /blockquote>
Я считаю, что это то, что я сделал в фрагменте ниже, однако размещенная таблица по-прежнему не «растягивает», чтобы заполнить доступную высоту: < /p>


.txtsz12 { font-size: 1.2em; text-align: center;}

.tblborder, .tblborder tr, .tblborder tr td {
border-collapse: collapse;
border: 1px solid #000;
}

#tblmain_row_content td {
padding-left: 78px;
padding-right: 78px;
padding-top: 20px;
padding-bottom: 20px;
}

td#stg_tbl_td, td#stg_tbl_td td { /* needs to be more specific to apply (to reset above padding) */
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
}< /code>




Content[/b][b]      
Settings








Test Mode 1
settings: lorem 125 ipsum 256 dolor 456


Test Mode 2
settings: lorem 225 ipsum 356 dolor 556


Test Mode 3
settings: lorem 325 ipsum 456 dolor 656


Test Mode 4
settings: lorem 425 ipsum 556 dolor 756


Test Mode 5
settings: lorem 525 ipsum 656 dolor 856






< /code>
< /div>
< /div>
< /p>
Для этого конкретного примера я знаю, что мой контент Div имеет высоту: 350px; и верхняя/нижняя накладка составляет 20px; so the overall tr ​​(or td) height is 350+2*20 = 390 px - and I can simulate the layout that I want by setting the height of the placed table to 390 px:


.txtsz12 { font-size: 1.2em; text-align: center;}

.tblborder, .tblborder tr, .tblborder tr td {
border-collapse: collapse;
border: 1px solid #000;
}

#tblmain_row_content td {
padding-left: 78px;
padding-right: 78px;
padding-top: 20px;
padding-bottom: 20px;
}

td#stg_tbl_td, td#stg_tbl_td td { /* needs to be more specific to apply (to reset above padding) */
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
}< /code>




Content[/b]

Settings








Test Mode 1
settings: lorem 125 ipsum 256 dolor 456


Test Mode 2
settings: lorem 225 ipsum 356 dolor 556


Test Mode 3
settings: lorem 325 ipsum 456 dolor 656


Test Mode 4
settings: lorem 425 ipsum 556 dolor 756


Test Mode 5
settings: lorem 525 ipsum 656 dolor 856

... однако, как я отметил, в моем фактическом случае я делаю не знаю высоту div id = "content_main" элемент a-prior 100%, или другими способами).
можно ли решить это только с помощью CSS, не прибегая к JavaScript (для чтения вычисленной ячейки/высоты строки, а затем применить ее к высоте размещенной таблицы, аналогично ответу в том, как сделать Высота)?>

Подробнее здесь: https://stackoverflow.com/questions/796 ... d-with-css