PDA

View Full Version : table rows/columns with dynamic height



ivarbug
Mar 7th, 2008, 11:21 AM
I'm trying to create a layout where i have table with height 100% and 3 rows(header, content, footer). 1st and 3rd row are fixed heights and 2nd row should take up the rest of the page and use scrolling when necessary so the 1st and 3rd are visible all the time.
There are always thousand problems.
Instead of making middle row height fit, IE tries to even all row heights when heights for 2 rows are specified. I fixed this by removing the doctype or setting middle row's height to expression(document.body.clientHeight - 86 + "px").
In FF, I can't get the content in the middle row to scroll. It just stretches whole page. Fixed this by removing the doctype again. There was another way too, but can't remember it.
In Opera I have problems with scrolling. 1)appearance of the vertical scrollbar causes horisontal scroll. 2) If I set overflow property to anything and the content in the middle row is taller than it's height and should scroll, inner contents doesn't appear at all. When I remove overflow property from styles, the contents are displayed, but there's no scrolling. Acts as overflow: hidden. I think that the cause of this problem is that I set the middle row's content after the main page has loaded.

My table:
<table width="100%" border="0" cellpadding="0" cellspacing="1" class="layout" style="table-layout:fixed;height: 100%;">
<colgroup><col width="192"></col><col width="100%"></col></colgroup>
<tr style="height: 64px;">
<td valign="bottom" align="right" colspan="2" style="background-color:#800000;"><div style="width: 600px;"></div></td>
</tr>
<tr>
<td valign="top"><div id="folders" style="width: 192px;height: 100%;"></div></td>
<td valign="top"><div id="main" style="width: 100%;height: 100%;"></div></td>
</tr>
<tr style="height: 16px;">
<td colspan="2" align="center">footer</td>
</tr>
</table>

My styles:
html,body
{
font-family: verdana;
background-color: #ffffff;
font-size: 11px;
margin: 0px;
padding: 0px;
height: 100%;
border: none;
}
img{border: none;}
table.layout{border: 1px solid #000000;font-size: 9px;background-color: #dbd7cc;}
.xxxgayporn{height: expression( document.body.clientHeight <= 600 ? "514px" : document.body.clientHeight - 86 + "px" );}
table.layout td{background-color: #ffffff;}
a{color: #cc9999;text-decoration: none;}
a:hover{color: #ff0000;text-decoration: none;}

I would be very very grateful if somebody could post me a perfect code for this kind of layout that I tried to describe(header,content,footer where header and footer are always visible and with fixed heights so the whole page doesn't need scrolling. middle part's content scrolls. it would be nice if the layout has some minimum widths and heights too).

sobrien79
Mar 7th, 2008, 04:24 PM
I do it on my site. Note, I haven't been able to get it to work on IE6. Though I didn't try very hard. I forget where I found the code from.

http://sean-obrien.net/

All the css code to make it work is in here:
http://sean-obrien.net/styles/main.css

ivarbug
Mar 7th, 2008, 07:10 PM
thanks,
one think, that I forgot to mention was, that I need to have the content part divided into 2 columns. each column with it's own scrollbar. so the middle content part with it's scrollbar must be logically in the middle... somehow.:confused: I'm not good at making layouts using div-s and css.

How can I set a div's outer width to 100%??? This is so stupid, why are paddings added to widths and heights at all?

ivarbug
Mar 10th, 2008, 11:41 PM
ok, i solved it myself. i'll post the solution for this layout. this is tested in ie7, ff and opera. works good.
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="header"><div>
<div id="body">
<div id="folders"></div>
<div id="border"></div>
<div id="main"></div>
</div>
<div id="footer"></div>
</body>
and css:
html,body
{
background-color: #ffffff;
color: #000000;
font-size: 11px;
margin: 0px;
padding: 0px;
height: 100&#37;;
}
div{margin: 0;padding: 0;}
#header
{
position: absolute;
top: 0px;
left: 0px;
height: 64px;
width: 100%;
background-color: #800000;
}
#body
{
width: 100%;
height: 100%;
-moz-box-sizing: border-box;box-sizing: border-box;
height: expression(document.body.clientHeight - 80 + "px");
padding: 64px 0px 16px 0px;
background-color: #800000;
color: #000000;

}
#folders
{
height: 100%;
width: 192px;
float: left;
overflow: auto;
background-color: #ffffff;
}
#border{float: left;width: 1px;height: 1px;}
#main
{
height: 100%;
overflow: auto;
background-color: #ffffff;
}
#footer
{
position: absolute;
left: 0px;
bottom: 0;
height: 16px;
width: 100%;
background-color: #800000;
}