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: 190

Filed under:
|
|
|
|

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

Related posts about html

Related posts about css