penders
msg:4415438 | 2:49 pm on Feb 8, 2012 (gmt 0) |
| I understand it is inheriting the window height |
|
Isn't it... 100% + 48px (the height of your #header)? What about setting your #header to a percentage height and adjusting your table height to the rest? eg. 10% + 90% ?
|
Paul_o_b
msg:4415658 | 12:11 am on Feb 9, 2012 (gmt 0) |
You could drag the table up by 48px and then put 48px top padding on the first cell to keep it clear.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<style type=text/css>
html, body {
height:100%;
margin:0;
padding:0
}
#header {
height:48px;
background-color:red;
position:relative;
z-index:2;
overflow:hidden;
}
#template {
background:#FFF908;
width:100%;
border-collapse:collapse;
height:100%;
margin-top:-48px;
position:relative;
z-index:1;
}
#template td { vertical-align:top; }
.top { padding:48px 10px 0 }
p { margin:0 0 1em }
</style>
</head>
<body>
<div id="header">Header </div>
<table cellspacing="0" cellpadding="0" id="template" >
<tr>
<td class="top"><p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p></td>
</tr>
</table>
</body>
</html>
It all depends on what happens next of course.
I hope that table is for tabular data ;)
|
optik
msg:4415847 | 12:27 pm on Feb 9, 2012 (gmt 0) |
That's worked thanks Paul, it's retro layouts for HTML e-mails.
|
penders
msg:4415891 | 2:24 pm on Feb 9, 2012 (gmt 0) |
?! Just curious, are assuming a minimum viewport height? Or are you perhaps scaling something (an image?) to always fit?
@Paul_o_b like it! :)
|
|
