css full height

busnut · March 10, 2009

G'day

i've been playing around with alot of scripts on the net re static header/footer and scrollable contents (if that makes sense), but as I also use a media print feature so when the user prints the webpage, it doesn't the header/footer, I found that alot of the css templates all suffered various issues of not printing the page correctly, so I made my own up from scratch and it works perfectly in IE7, Firefox 3.0.7 & Safari 3.2.1, both the way it displays & how it prints, except i'm struggling with having the div of 'contents' set out to take up all bar 75px for the header and 25px for the footer.

It has something to do with full-height, and have no idea how to get it to display correctly.

Below is the code if anybody is able to assist to get the 'div' of 'contents' to ensure it pushes the 'footer' down to the bottom margin, without any wasted space between the header/contents/footer.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
<meta http-equiv="Content-Language" content="en-au">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>title goes here</title>

<style type="text/css" media="screen">

body {
margin: 0px;
font-size: 10pt;
font-family: Arial;
background: #D0D0D0;
text-align: center;
}

#header {
margin-top: 0px;
margin-right:auto;
margin-left:auto;
width: 800px;
height: 75px;
padding: 5px;
background: #E0E0E0;
color: #000;
overflow: hidden;
text-align: left;
}

#contents {
margin-top: 0px;
margin-right:auto;
margin-left:auto;
width: 800px;
height: 85%;
padding: 5px;
background: #FFFFFF;
color: #000;
overflow: auto;
text-align: left;
}

#footer {
margin-top: 0px;
margin-bottom: 0px;
margin-right:auto;
margin-left:auto;
width: 800px;
height: 25px;
padding: 5px;
background: #E0E0E0;
color: #000;
overflow: hidden;
text-align: center;
font-size: 8pt;
}

</style>

<style type="text/css" media="print">
.noprint{}
@media print{
.noprint {display: none;}
#header, #footer, .noprint {display: none;}
#contents {width: 100%; margin: 0; margin-top: 0; float: none;}
}

</style>

</head>

<body>

<div id="header">header goes here<br>menu goes here</div>
<div id="contents">contents goes here</div>
<div id="footer">Copyright © 2001-2009</div>

</body>

</html>

I'm unsure if my coding will work in all browsers, but so far im happy that i've been able to at least achieve this. Any help is greatly appreciated!

Sign In

css full height

Recommended Posts

busnut

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information