Firefox, IE9+ issue with div height 100% inside a td (working example on Chrome)

css, html, html-table

Solution

Try setting the height of the `tr` and `td` to 100%:

tr, td { height: 100%; }

Generally speaking to get `height: 100%` to work correctly, all the heights of the element's parents must be set as well.

EDIT:

An alternative solution is to wrap the contents of the `td` with a container `div` and use absolute positioning to ensure the `.edit-me` div effectively has 100% height.

Here's what the HTML would look like:

<table border="1">
    <tr>
        <td>
            <div class="container">
                <div class="edit-me"></div>
                Foo
                <br/>
                Bar
            </div>
        </td>
        <td>hello</td>
    </tr>
</table>

and the CSS:

.container {
    position: relative;
    padding-left: 10px;
}

.edit-me {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;

    width:10px;
    border:1px solid blue;
    background:red;
    overflow: auto;
}

Hope this helps!

Problem

Take this: http://jsfiddle.net/zVscL/4/ ``` .edit-me { height:100%; /*does not behave the same as Chrome*/ width:10px; border:1px solid blue; background:red; float:left; overflow: auto; } ``` Open the page on Chrome, then Firefox. The blue div does not inherit Is there an explanation why this happens? Any fixes? Pure HTML/CSS solutions are preferable. I've been at this shit for hours trying to get CSS to behave and when I finally do FF does this. Eating up my development time.

Original source

Related problems