100% высоты в ячейке(display:table-cell) таблицы(display:table)

Question

[termi]

Как растянуть элемент по высоте на 100% в ячейке таблицы, если высота ячейки не указана (height:auto)?

Хак для Chrome: указать у ячейки высоту в 1px.
Хак для FireFox: указать у ячейки минимальную высоту в 1px.

Может быть есть какие-нибудь хаки для Opera и IE?

Пример: jsfiddle.net/y8Bvd/2/

Answer 1

[Сергей Протько]

Возможно для реализации вашей задумки проще использовать другой способ, нежели пытаться имитировать поведение таблицы дивами? Универсальный способ вряд-ли удастся найти. А если и найдете, то он будет уж слишком тяжелый и необоснованно сложный.

Answer 2

[MT]

Используйте JavaScript — это, пожалуй, единственный надёжный и безопасный для будущих версий браузеров способ назначить высоту в процентах от высоты родительского блока.

Comments

[MT]

Либо попробуйте пересмотреть вёрстку, чтобы такой задачи не возникало вовсе.

Answer 3

[Иван Трофимов]

Используйте JavaScript. Я всегда использую для этого функцию JQuery $.height()
Сначала вычисляете высоту ячейки, записываете её в переменную, а затем задаёте эту высоту элементу.
Пример кода:
var height = $("table tr td").height();
$("#element_id").css('height', height+'px');