CSS: 100% of container height without modifying the container
- by Rena
Yeah, this ugly question again. I'm writing some HTML that gets inserted into a page. I have no control over the rest of the page. The structure is something like:
<table
<tr
<td rowspan="2"left column</td
<td height="1"top row above content</td
</tr
<tr<td height="220"my content here</td</tr
</table
I can write whatever I want into that table cell (including style tags to pack in my CSS), but I can't touch anything outside of it, which means I can't set the height of any parent element (including html and body), add a doctype (it has none), etc - that already kills just about every solution I can find (all seem to be "add a doctype" and/or "give the parent container a fixed height").
What I want to do is simply have a <div fill the entire cell. Width is no problem but unsurprisingly height is being a massive pain. Writing "height: 100%" doesn't do anything unless the container has a fixed height (the height="220" attribute apparently doesn't count) or the div uses absolute positioning - and then it seems to want to use 100% of the window's height (and width even) instead of the cell's.
The root of the problem is the left column varies in height, as does the content, and when the left column cell is larger than the content, it won't expand to fill the cell it's in. If I set a fixed height for the content, it'll be much larger than necessary most of the time, and if I don't, it doesn't take up all of the cell and leaves an ugly gap at the bottom.
