How to set nested DIV height same as container?

Question

Please find my code fragment as below:

<table cellpadding="0" cellspacing="0" style="background-color:Aqua">
    <tr>
        <td>
            <div style="background-color:Yellow">Navigation</div>
        </td>
        <td>
            Content<br />Content<br />Content<br />Content<br />
        </td>
    </tr>
</table>

How can I make the height of <div> same as the content growth in <td>? I tried to set height=100% or AUTO in <div> and <td>, but it doesn't fix the problem.

I know it can be fix by using jQuery/JavaScript to get the height of content and set on the <div>, for example:

$(".divClass").height($(".contentClass").height());

but my content will be collapse and expanse upon user actions, so I looking for better fix. the solution has to be cross browser compatible for IE 6 to IE 10.

possible duplicate of [Make a div fill the remaining screen space](http://stackoverflow.com/questions/90178/make-a-div-fill-the-remaining-screen-space) — raam86, Jul 04 '13 at 09:58
do you want your final table to look something like http://jsfiddle.net/VmrBB/? — Raj Nathani, Jul 04 '13 at 10:05
also the jquery solution which you have is good. when the user performs an action that changes the layout you can call the same code (probably through a function?) once more. — Raj Nathani, Jul 04 '13 at 10:08
is there a CSS solution only? cause I tried to minimize the scripting — sams5817, Jul 04 '13 at 10:30
This looks like a misuse of tables (tables should only be used for expressing tabular data, not for layout purposes). — cimmanon, Jul 04 '13 at 11:39

score 1 · Answer 1 · answered Jul 04 '13 at 10:08

1

You can do it directly with HTML/CSS

<table cellpadding="0" cellspacing="0" style="background-color:Aqua">
    <tr>
        <td>
            <span style="height:100%; display:inline-block; width: 100%; background-color:Yellow">
                Navigation
            </span>
        </td>
        <td>
            Content<br />Content<br />Content<br />Content<br />
        </td>
    </tr>
</table>

answered Jul 04 '13 at 10:08

Craig

11
1

I wonder this is the solution for IE? I tried and it doesnt work as per expected – sams5817 Jul 04 '13 at 10:27

score 1 · Answer 2 · answered Jul 04 '13 at 10:09

1

Try using height:inherit; :) worked for me :)

JsFiddle.

HTML:

<div class="foo">
    <div class="foo2">
        Foo2
    </div>
</div>

CSS:

.foo {
    height: 100px; /*try changing this */
    background-color: yellow; /*it wont show*/
}

.foo2 {
    height: inherit;
    background-color: green; /*it will show*/
}

answered Jul 04 '13 at 10:09

Mohammad Areeb Siddiqui

9,795
14
71
113

the context is within a table, although a neat solution, it will not work in this case: http://jsfiddle.net/gdR7e/ – Raj Nathani Jul 04 '13 at 10:13
I refer to solution of nested div in td, not nested div in div – sams5817 Jul 04 '13 at 10:30

How to set nested DIV height same as container?

2 Answers2