CSS: 100% of container height without modifying the container
Posted
by
Rena
on Stack Overflow
See other posts from Stack Overflow
or by Rena
Published on 2011-01-15T09:31:23Z
Indexed on
2011/01/15
13:53 UTC
Read the original article
Hit count: 216
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.
© Stack Overflow or respective owner