CSS: firefox + table + height 100% + overflow hidden = madness
I have the following html:
<table>
<tr>
<td>
<div class="main-area">
<div class="content-wrapper">
</div>
</div>
</td>
</tr>
</table>
which I style in the following way:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
table {
width: 100%;
height: 100%;
}
td {
height: 100%;
}
.main-area {
background-color: red;
height: 100%;
overflow: hidden;
}
.content-wrapper {
height: 100%;
}
So basically, I want everything to have a height of 100%. There is a table with exactly one cell and inside there are two nested divs, while the outer one has overflow:hidden applied to it.
Here is a fiddle with this exact setup: http://jsfiddle.net/21ytsquo/
As you realize, it looks ok at first and you see the window filled with the red "main-area". The weird thing happens when you try to resize the window. If you decrease the height, the inner elements don't decrease with it, they just stay the same size and the outer window overflows with scroll bars. When you increase the height, then the new larger height becomes now the fixed height for the inner content. (I hope it is understandable, but if you play around with the fiddle, you will immediately see the problem)
This is only reproduceable with this exact setup. If I just use another div instead of a table-cell, it works. If I remove the content-wrapper element, it works. If I omit the overflow:hidden , it works. It so far only occured for me in firefox. In Chrome it seems to work fine.
So why is this happening?
I beleave it was because of this bug: https://bugzilla.mozilla.org/show_bug.cgi?id=63895
Havent looked to mutch into it, but it should be long fixed by now.
链接地址: http://www.djcxy.com/p/39562.html