100% height in the cell(display:table-cell) of the table(display:table)

Question

css

How to stretch element height by 100% in table cell if cell height is not specified (height:auto)?

Hack for Chrome: set cell height to 1px.
Hack for FireFox: set a minimum cell height of 1px.

Maybe there are some hacks for Opera and IE?

Example: jsfiddle.net/y8Bvd/2/

Answer 1

Perhaps it's easier to implement your idea in another way than trying to imitate the behavior of the table with divs? A universal way is unlikely to be found. And if you find it, it will be too heavy and unreasonably complicated.

Answer 2

Use JavaScript - this is probably the only reliable and safe way for future browser versions to assign a height as a percentage of the height of the parent block.

Answer 3

Use JavaScript. I always use the JQuery $.height() function to do this. You
first calculate the height of the cell, store it in a variable, and then set that height to the element.
Code example:
var height = $("table tr td").height();
$("#element_id").css('height', height+'px');