i am new to designing html pages..i have searched for answer through the day.. but no luck.. i have problem in fixing my html page height fit to the browser . i am developing web page with the help of apache tiles for page layout. so in my layout i will have header , body and footer. below is my tiles layout jsp
<body>
<table width="100%" height="100%" align="center">
<tr height="20%">
<td><tiles:insertAttribute name="header" /></td>
</tr>
<tr height="60%">
<tiles:insertAttribute name="menu" ignore="true" />
<td align="left">
<tiles:insertAttribute name="body" />
</td>
</tr>
<tr height="20%">
<td><tiles:insertAttribute name="footer" /></td>
</tr>
</table>
</body>
and i have css defined for body and table as follows
body {
background-color: #f0f0f0;
width: 100%;
height: 100%;
margin: 0%;
padding: 0%;
}
table {
table-layout: fixed;
overflow: auto;
}
i want to design my pages with percentage and i dont want to use pixels for scaling issues on different screen resolution.
when i load the page.. the table height shrinks with respect to the body page content size.. for e.g - if i have body page size of two line. then my footer moves up (looks weird) . i would like to fix header, body and footer with 20 % 60% and 20% respectively, and this should be fixed.
Thanks in advance