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>
I just answered a question like this today and i believe you're looking for the same thing, here is the question itself and my answer:
HTML
<div class="container">
<div class="twenty">
fixed height 20
</div>
<div class="fifty">
fixed height 50
</div>
<div class="hundred">
fixed height 100
</div>
<div class="auto">
<div class="content">
....
</div>
</div>
<div class="fifty" style="border-bottom:none; border-top:1px solid">
fixed height 50
</div>
</div>
CSS
html,body {
height:100%;
margin:0;
padding:0;
overflow:hidden;
}
.container {
width:100%;
height:100%;
}
.twenty, .fifty, .hundred, .auto {
border-bottom:1px solid black;
}
.twenty {
height:20px;
}
.fifty {
height:50px;
}
.hundred {
height:100px;
}
.auto {
height:100%;
overflow:hidden;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
margin:-120px 0;
padding:120px 0;
}
.content {
float:left;
overflow:auto;
height:100%;
}
.content{
width:100%;
}
Full view: http://jsfiddle.net/8abeU/show/
Fiddle: http://jsfiddle.net/8abeU
I'm not sure I understand why you need to use a table. If your goal is simply to create a layout that always spans the entire height of the browser window when the content in the middle is small and adjusts vertically when the content increases, then CSS is all you need.
<html>
<head>
<style>
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
height:100%; /* Necessary for IE
position:relative;
background-color: red; /* Set equal to background-color of #body. This creates the illusion that your middle content spans the entire height of the page */
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
background-color: red; /* Set equal to background-color of #container */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
</style>
</head>
<body>
<div id ="container">
<div id="header"></div>
<div id="body">
This is resizable.
</div>
<div id="footer"></div>
</div>
</body>
</html>
Refer to this guide for how to do it (all I did was edit the background colors of the container and body divs to create the illusion that the middle content spans 100% height. adjust the css width, etc... to fit your layout).
