Question

I’m trying to create a table of rows, each of which has some content in some block element (I’m using a DIV in this example for simplicity) whose element I want to stretch to the full height of the TD cell. In this example, the “test” text on the right should have its containing grey DIV filling up the full height of the containing TD cell:

http://www.game-point.net/misc/browserTests/scratchpads/fullTableCellHeight/

I don’t want to explicitly set the height of anything (except maybe to a percentage) – setting height:100% on the child DIV doesn’t change its height. Is there any way to do this? It seems absurd that the browser, which obviously knows the table cell’s rendered height, provides absolutely no way to size a child element to fill it without using Javscript!

NOTE: I’m aware that there are other questions similar to this but they don’t seem to take into account CSS3’s new flexbox functionality – perhaps that could solve this problem?

Answer 1

I’m told by Boris Zbarsky himself that it is completely impossible to do this – make a child element of a table cell fill the cell’s full height – unless the height of the cell is specified explicitly. Browser makers could probably make this work if they wanted to, but they can’t be bothered.