I'm sorry if this was already answered, but it's kind of difficult to search for something with "100% height".
My problem is that I need 100% height table layout because of automatic cell resizing done by browser, which I don't want to script myself for obvious reasons.
It differs from other "100% problems", in that I need some cells to stick on the top and some on the bottom, and have the middle resized by browser to fill remaining space.
That sort of works, the problem happens when I need that middle part to contain overflowing stuff, and obviously I want overflow:auto there to enable user thru that stuff. It works in WebKit; in Firefox, it doesn't; others not tested. Here's the test case.
<html>
<head>
<style>
body, html {
height: 100%;
margin: 0;
padding: 0;
}
table {
height: 100%;
width: 200px;
border: 0;
}
.fill {
background-color: red;
}
.cont {
overflow: auto;
height: 100%;
}
</style>
</head>
<body>
<table>
<tr>
<td style="height:50px"></td>
</tr>
<tr>
<td style="height:100px"></td>
</tr>
<tr>
<td class="fill">
<div class="cont">
An opaque handle to a native JavaScript object. A JavaScriptObject cannot be created directly. JavaScriptObject should be declared as the return type of a JSNI method that returns native (non-Java) objects. A JavaScriptObject passed back into JSNI from Java becomes the original object, and can be accessed in JavaScript as expected
</div>
</td>
</tr>
<tr>
<td style="height:100px"></td>
</tr>
</table>
</body>