Page is a not externally linkable
- Code, Content, and Presentation
-- CSS
---- 100% table height causing scroll bars


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 ;)


Thread source:: http://www.webmasterworld.com/css/4415419.htm
Brought to you by WebmasterWorld: http://www.webmasterworld.com