100% table height causing scroll bars

Forum Moderators: not2easy

Message Too Old, No Replies

100% table height causing scroll bars

optik

2:07 pm on Feb 8, 2012 (gmt 0)

How can I get the table to end at the need of the page instead of causing scrollbars, I understand it is inheriting the window height

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type=text/css>
#wrapper, html,head,body{
height:100%;
}

body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#header{
height:48px;
background-color:#FFFF909;
}
</style>
</head>

<body>
<div id="wrapper">


<div id="header">

</div>


<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" id="template" bgcolor="#FFF908">
<tr>
<td align="center" valign="top">

</td>
</tr>
</table>


</div>
</body>
</html>

penders

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

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

12:27 pm on Feb 9, 2012 (gmt 0)

That's worked thanks Paul, it's retro layouts for HTML e-mails.

penders

2:24 pm on Feb 9, 2012 (gmt 0)

...causing scrollbars

...for HTML e-mails

?! Just curious, are assuming a minimum viewport height? Or are you perhaps scaling something (an image?) to always fit?

@Paul_o_b like it! :)