termi2011-05-20 16:23:48
termi, 2011-05-20 16:23:48

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

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 the question

In order to leave comments, you need to log in

3 answer(s)
Sergey, 2011-05-20
Protko @Fesor

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.

MT, 2011-05-20

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.

Ivan Trofimov, 2011-05-27

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');

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question