8
I have a need to make a table of fixed size, containing three rows, where the middle row auto expands to fill the remaining space between the top and bottom rows.
Here is what I have so far, unfortunately using height:100% for the middle row blows the size of the table!
Expand|Select|Wrap|Line Numbers
- <html>
- <head>
- <title>Auto expanding middle row!</title>
- <style type="text/css">
- html, body {
- width:100%; height:100%; margin:0; padding:0;
- }
- #fixed {
- width:300; height:300; border:1 solid #f00;
- }
- #top {
- text-align:center; vertical-align:top; background-color:#006699; position:relative; left:0px; top:0px;
- }
- #content {
- text-align:center; vertical-align:top; background-color:#CCCCCC; position:relative; top:0; bottom:0; height:100%;
- }
- #bottom {
- text-align:center; background-color:#666666; position:relative; bottom:0;
- }
- </style>
- </head>
- <body>
- <div id="fixed">
- <div id="top">first row contents, may be quite long so that it overflows and wraps</div>
- <div id="content">second is expanded to fill the remaining available space...</div>
- <div id="bottom">third row contents, and also may be quite long so that it overflows and wraps</div>
- </div>
- </body>
- </html>
In this case there I believe there is a valid reason for using a fixed layout table.
There are plenty of threads already out there putting the cases for and against using them. I realy dont think we need to get into another discussion about whether or not I should be using a fixed layout in the first place.
