homepage Welcome to WebmasterWorld Guest from 23.22.59.252
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
100% table height causing scroll bars
optik

5+ Year Member



 
Msg#: 4415419 posted 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

WebmasterWorld Senior Member penders us a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



 
Msg#: 4415419 posted 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

10+ Year Member



 
Msg#: 4415419 posted 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

5+ Year Member



 
Msg#: 4415419 posted 12:27 pm on Feb 9, 2012 (gmt 0)

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

penders

WebmasterWorld Senior Member penders us a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



 
Msg#: 4415419 posted 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! :)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved