Geek asks and answers

Firefox, IE9 + problem with 100% div height inside td (working example in 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;
}

Open the page in Chrome, then in Firefox. Blue div does not inherit

Is there any explanation why this is happening? Any corrections? Pure HTML / CSS solutions are preferred.

I was on this shit for hours trying to get CSS to behave, and when I finally do FF, I do it. Using development time.

+5
source share
1 answer

Try to set the height trand td100%:

tr, td { height: 100%; }

Generally speaking, in order to work correctly height: 100%, you must also set all the heights of the parent elements.

EDIT:

, td div , .edit-me div 100%.

HTML:

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

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;
}

, !

+9

More articles:


All Articles