Firefox, Ie9+ Issue With Div Height 100% Inside A Td (working Example On Chrome)

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

Solution 1:

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:

<tableborder="1"><tr><td><divclass="container"><divclass="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!