0

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?

Jez
  • 27,951
  • 32
  • 136
  • 233
  • First question would be why do you need it to fill the height of the cell? It looks as though you're trying to do this so you can set the background of the block element, in which case why can't you set it on the cell itself? – adhocgeek Nov 26 '12 at 17:39
  • Because I want it to be something that can be clicked on, ultimately. – Jez Nov 26 '12 at 17:40
  • Is there a reason you can't use the table cell instead? – adhocgeek Nov 26 '12 at 17:43
  • You can't wrap an anchor link around a table cell...? – Jez Nov 26 '12 at 17:43
  • You don't need an anchor link around the cell to enable it to be clicked on, just add an onclick event attribute. – adhocgeek Nov 26 '12 at 17:45
  • 1
    possible duplicate of [How to make
    fill height](http://stackoverflow.com/questions/3542090/how-to-make-div-fill-td-height)
     – Andy Nov 26 '12 at 17:45
  • @adhocgeek That brings Javascript into things, which I don't want to do. – Jez Nov 26 '12 at 17:45
  • e.g. http://stackoverflow.com/questions/3722465/how-do-i-change-html-table-cell-color-on-click – adhocgeek Nov 26 '12 at 17:46
  • @Andy That is a relatively old question and the answers don't take into account CSS3's new flexbox functionality, so I'd say this is not a dupe. – Jez Nov 26 '12 at 17:52

2 Answers2

1

You can set the parent element to relative positioning and the child to display block and it should fill the height. I use the technique a lot when trying to get link text to fill the entire button container. Hopefully, it translates to what you are trying to do but since you have no code to show I will give you a brief example of a real life scenario when I use it:

<div style="position:relative; width: 50px; height: 50px;">
    <a href="" style="display: block; width: 100%; height: 100%;">some link</a>
</div>
Tim Joyce
  • 4,487
  • 5
  • 34
  • 50
  • This is quite good, but unfortunately when you're applying `position:relative` to a TD table cell (as I am in my example), certain browsers like Firefox don't like it and it ruins the table. This may simply be buggy behaviour. – Jez Nov 26 '12 at 20:29
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.

Jez
  • 27,951
  • 32
  • 136
  • 233