height problem

[dare87]

I am trying to get nayliner.net/bunkall to be 100% height of the page. I have set all the things to 100% height but it is still not working. Am I missing something?

 

CSS

/*
=============================================================
HTML OBJECTS
=============================================================
*/

body {
position:relative;
margin: 0;
height: 100%;
background-image:url(../images/bg.jpg); background-repeat:repeat;

}

/*
============================================================
HEADER OPTIONS
============================================================
*/

#box{
position: relative; width: 828px;
min-height: 100%;
top:0px;
margin: 0 auto;
color:#FFFFFF;
}

#box a:link {
color: #000000;
text-decoration: none;
}

#box a:visited {
color: #000000;
text-decoration: none;
}

#box a:hover {
color: #000000;
text-decoration: none;
}


#header{
position: absolute;
width: 828px;
top: 0px;
left: 0px;
}

#links {
height:10px;
left: 40px;
top: -36px;
position:relative;

}

#links a:link {
color: #FFFFFF;
text-decoration: none;
}

#links a:visited {
color: #FFFFFF;
text-decoration: none;
}

#links a:hover {
color: #FFFFFF;
text-decoration: none;
}

#links ul {
margin: 0;
color:#FFFFFF;
padding: 0;
list-style: none;
}

#links li {
display: inline;
color:#FFFFFF;
margin: 0;
padding: 0;
}

#loggedin {
position:absolute;
top:0px;
left:0px;
}

/*
=============================================================
BODY OBJECTS
=============================================================
*/

#main {
position: absolute; 
top: 136px;
left: 0px;
width: 828px;
min-height: 100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
background: url(../images/middle.png) repeat-y;
}

#content {
width: 740px;
min-height: 100%;
padding-top:0px;
padding-bottom:0px;
padding-left:50px;
padding-right:40px;
}

#content a:link {
color: #FFFFFF;
text-decoration:underline;
font-weight: bold;
}

#content a:visited {
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
}

#content a:hover {
color: #FFFFFF;
text-decoration: underline;
font-weight: bold;
}

#title {
color: #faa634;
font-size:16px;
font-weight:bold;
}

#subtitle {
color: #faa634;
font-size:13px;
font-weight:bold;
}

.smallText {
font-size:9px;
font-style:italic;
}

/*
=============================================================
PHOTOGALLERY OBJECTS
=============================================================
*/

.ptitle {
font-size: 13px; font-weight: bold; color: #FFFFFF;
padding: 5px;
border-bottom: 1px solid #FFFFFF;
background-color: #3873b9;
}

.picCell {
padding-top: 5px; padding-left: 10px; padding-right: 10px; padding-bottom: 5px;
border: 0px solid #FFFFFF;
}

.iconPic {
border: 1px solid #000000;
}

.iconPic a:link {
border: 1px solid #000000;
}

.iconPic a:visited {
border: 1px solid #FFFFFF;
}

.picCaption {
font-size: 10px;
padding-left: 10px;
}

.break {
padding-bottom: 5px;
}

.innerContent {
float: left; 
width: 99%;
border-bottom: 1px solid #FFFFFF;
}

/*
=============================================================
ABOUT PAGE
=============================================================
*/

.ipage1 {
padding-top:5px;
padding-left:25px;
}


/*
=============================================================
ABOUT PAGE
=============================================================
*/

.apage1 {
padding-top:5px;
padding-left:25px;
}


/*
=============================================================
SCHEDULING PAGE
=============================================================
*/

.spage1 {
padding-top:5px;
padding-left:25px;
}


/*
=============================================================
LOCATION PAGE
=============================================================
*/


/*
=============================================================
CONTACT PAGE
=============================================================
*/

.cpage1 {
padding-top:5px;
padding-left:25px;
}

.cpage2 {
padding-left:25px;
}


/*
=============================================================
FOOTER OBJECTS
=============================================================
*/

#bottom {
color:#FFFFFF;
position: relative;
top:56px;
font-size: 9px;
padding-right:40px;
padding-bottom: 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: center;
background: url(../images/middle.png) repeat-y;
}

#bottom a:link {
color: #FFFFFF;
text-decoration: none;
}

#bottom a:visited {
color: #FFFFFF;
text-decoration: none;
}

#bottom a:hover {
color: #DDDDDD;
text-decoration: underline;
}

#bottom ul {
margin: 0;
padding: 0;
list-style: none;
}

#bottom li {
display: inline;
margin: 0;
padding: 0;
}

/*
=============================================================
NEWS OBJECTS
=============================================================
*/

.newsTitle {
font-size: 17px;
color: #927215;
font-weight: bold;
padding-top: 7px;
padding-bottom: 15px;
}

.newsArticle {
word-spacing: 1px;
padding-bottom: 5px;
}

.newsSig {
font-size: 10px;
border-top: 1px dashed #5b7aa4;
padding-bottom: 10px;
}

/*
=============================================================
FORM OBJECTS
=============================================================
*/

INPUT, TEXTAREA, SELECT {
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;
background-color: #000000;
color:#000000;
padding: 2px;
border: solid 1px #000000;
}

INPUT.button {
background-color: #bbbbbb;
color: #000000;
}

INPUT.bold {
background-color: #bbbbbb;
font-weight: bold;
}

INPUT.italic {
background-color: #bbbbbb;
font-style: italic;
}

INPUT.underline {
background-color: #bbbbbb;
text-decoration: underline;
}

INPUT.required {
background-color: #ffffff;
}

TEXTAREA.required {
background-color: #ffffff;
}

SELECT.required {
background-color: #ffffff;
}

INPUT.smallText {
font-size: 10px;
}

OPTION {
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;
border: solid 1px #000000;
}

INPUT.radio {
border: 0px;
background-color: #2a2a2a;
}

INPUT.highlighted {
border: 0px;
background-color: #1e1e1e;
}

 

 

Page

<?php
// Include the PHP script that contains the session information.
include('includes/session.php');
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="Author" content="Daron Nay">
<meta name="KeyWords" content="">
<meta name="Description" content="">
<title>Welcome to Bunkall Orthodontics | David M. Bunkall, DDS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link href="includes/base.css" rel="stylesheet" type="text/css">
<link href="includes/drop/dropdown.css" media="all" rel="stylesheet" type="text/css" />
<link href="includes/drop/bunkall/default.ultimate.css" media="all" rel="stylesheet" type="text/css" />

<!--[if IE]>
<script type="text/javascript" src="includes/drop/js/jquery/jquery.js"></script>
<script type="text/javascript" src="includes/drop/js/jquery/jquery.dropdown.js"></script>
<![endif]-->

<script type="text/javascript" src="includes/include.js"></script>
</head>

<body>
<div id="box">
<div id="header">    	
    	<?php include('includes/header.php'); ?>
</div>
<div id="main">
    	<div id="links">
		<?php include('includes/links.php'); ?>
	</div>
        <div id="content">
        	<strong><span style="color:#ff9900">W</span>elcome to Bunkall Orthodontics.  We’re glad that you’ve found us.  As the original orthodontic practice in Layton city, we are proud to continue the tradition of caring, personalized service that our patients have come to expect.  We’ve also “spiced things up” with a little youthful innovation and enthusiasm.  
<br><br>
<span style="color:#0064c8">A</span>t Bunkall Orthodontics you will find a friendly, comfortable environment where we know our patients’ names and take time to speak with our patients and parents.  We feel that this is the only way to provide top-of-the-line orthodontic treatment.  We expect great things from ourselves and we expect great things from our patients.  The results?... beautiful smiles & happy faces.</strong>
  	</div>
        <div id="bottom">
		<?php include('includes/bottom.php'); ?>
	</div>
</div>
</div>


</body>
</html>

[FaT3oYCG]

there is no way for an element to know what 100% of the page is, as css is all based arround divs and each div simply acts like a block following on from the previous one unless specified otherwise then you would need to set the height yourself for the main container, you could use javascript to set your main div's height but i dont know how sucessful that would be in making the rest of the divs fill the space.

[haku]

The above poster is mostly right.

 

But trying setting both the html and the body to 100% height:

 

html, body {height:100%;}