CODEWITHSUNDEEP
jqueryhtmlhtml-table
Tom Gullen
Tom Gullen

Reputation: 61773

Div 100% height in <td>

Related question is this one, but it's not really helpful as I can't explicitly set the height of anything, all of it has variable user defined content that can be one line tall or 5 lines tall.

Bit stuck on this one, given a table (inline CSS is for demonstration only):

<table border=1>
    <tr>
        <td valign="top">
            <table>
                <tr>
                    <td style="background:red">
                        Something here<br />
                        More
                    </td>
                </tr>
                <tr>
                    <td>
                        <div style="border:1px solid green">This needs to be 100% remaining height</div>
                    </td>
                </tr>
            </table>
        </td>
        <td style="background:blue">
            Blah<br />
            Blah<br />
            Blah<br />
            Blah<br />
            Blah<br />
            Variable<br />
            Number<br />
            Of lines!
        </td>
    </tr>
</table>

I need to make the div expand to 100% height of it's containing div, so it matches the total height of the blah blah blah column (and for this to happen I assume the parent td first needs to expand to fill remaining height).

I have a JSFiddle here:

http://jsfiddle.net/WZC35/1/

Showing what I mean a lot clearer.

I can use Jquery, but would rather have a CSS solution. I know that using tables is questionable but this is for a Jquery plugin to render data in a fairly complicated layout, and tables provide the best supported solution and solve a lot of alignment issues, if you want to see this context of it, see this link:

http://69.24.73.172/demos/eventml/default.htm

I'm trying to make the big purple purple box match the height of the right hand column.

Upvotes: 2

Views: 1897

Answers (2)

Michael Christensen
Michael Christensen

Reputation: 1786

I cant say I like anything about this markup. Nested tables are ugly and inline styles are problematic too but This seems to get close to what you want?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Something here More</title>
</head>

<body>

<table border="1">
<tr>
    <td valign="top" style="height: 100%">
    <table style="height:100%">
        <tr>
            <td style="background: red;">Something here<br />
            More </td>
        </tr>
        <tr style="height:100%">
            <td style="height:100%">
            <div style="border: 1px solid green; height:100%">
                This needs to be 100% remaining height</div>
            </td>
        </tr>
    </table>
    </td>
    <td style="background: blue">Blah<br />
    Blah<br />
    Blah<br />
    Blah<br />
    Blah<br />
    Variable<br />
    Number<br />
    Of lines! </td>
</tr>
</table>

</body>

Upvotes: 1

dgnin
dgnin

Reputation: 1607

After take a look to your links, I think that you could use perfectly rowspan instead of nested tables (like says PJP). Then you can associate the CSS decoration desired (purple background) to the td, not to the div. The div could only contains text, if it is needed at all.

    <table border=1>
    <tr>
        <td valign="top" style="background:red">
                        Something here<br />
                        More
        </td>
        <td style="background:blue" rowspan="2">
            Blah<br />
            Blah<br />
            Blah<br />
            Blah<br />
            Blah
        </td>
    </tr>
    <tr>
        <td style="border:1px solid green">
            <div >This needs to be 100% height</div>
        </td>
    </tr>
</table>

Upvotes: 2

Related Questions