Hallo! Ich habe ein Problem mit dem Aufbau einer Seite. Wer kann mir helfen, den Fehler zu finden warum der div #container nicht bis zum Seitenende läuft (hier orange), obwohl height: 100%? Dadurch sitzt auch der footer nicht am unteren Rand, sondern steht quasi mitten auf der Seite. 
Für Hilfe wäre ich sehr dankbar!! 
Hier mein Code:<!doctype html>
<html>
<head>
<title>Start PTM</title>
<!--<link rel="stylesheet" type="text/css" href="style-ptm.css"/>-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type=text/css>
body, html { background-color: #EBE7E7;
height: 100%;
}
* { margin:0;
padding:0;
}
#container { position: relative;
min-height: 100%;
height: 100%;
background-color: orange;}
#header { margin: 0px 0px 15px 0px;
background-color: #336666;
height: 100px;
width: 100%;
}
#headerBox { width: 960px ;
margin: auto;
}
#logo {
margin-top: 20px;
}
#headerRight { float: right;
margin-top: 10px;
}
#headerText { font-size: 0.8em;
color: #fff;
}
#headerRight a {text-decoration: none;
color: #fff;
font-family: arial, sans-serif;
font-size: 0.8em;
}
#headerRight a:hover { color: rgb(91,234,205);
}
#headerRight a:visited { color: #fff;
}
form {
margin-top: 4px;
}
input { height: 20px;
outline: none;}
button {height: 22px;
width: 50px;
}
#mainnav { margin-bottom: 10px;
}
#mainnav li {
float: left;
width: 240px;
height: 25px;
background-color: #2D3E4E;
text-align: center;
line-height: 25px;
font-size: 1em;
list-style-type: none;
}
#mainnav li a {
text-decoration: none;
display: block;
font-family: sans-serif;
color: #fff;
}
#mainnav li a:hover { background-color: #999;
}
#imgCenter { margin-top: 10px;
margin-bottom: 10px;
}
.maincontent { margin: auto;
width: 960px;
background-color: red;
}
#textLeft {background-color: #fff;
float: left;
padding: 8px;
width: 450px;
margin-right: 14px;
}
#textRight {background-color: #fff;
float: left;
padding: 8px;
width: 450px;
margin-left: 14px;
}
#imgRight {float: right;
margin: 0 4px 4px 10px;
}
#imgLeft {float: right;
margin: 20px 4px 4px 30px;
}
.text {font-size: small;
font-family: "Times New Roman";
color: gray;}
h3 {font-size: medium;
color: #242491;}
hr { margin: 8px 3px;
color: #ccc;
}
.footer { position: absolute;
bottom:0;
background-color: #336666;
width: 100%;
height: 30px;
font-family: sans-serif;
color: #fff;
font-size:0.6em;
text-align: center;
line-height: 30px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div id="headerBox">
<img id="logo" src="bilder/logo2.png" width="167" height="47" alt="BILD" title="BILD" />
<div id="headerRight">
<p id="headerText"><a href="#">Lorem</a> | <a href="#">Ipsum</a> | <a href="#">Kontakt</a></p>
<form>
<input type="text" name="text" />
<button type="button">Suche</button>
</form>
</div>
</div>
</div> <!--- End #header --->
<div class="maincontent">
<div id="mainnav">
<ul>
<li><a href="#">START</a></li>
<li><a href="#">ABFAHRT</a></li>
<li><a href="#">VERSPÄTUNG</a></li>
<li><a href="#">S-BAHN</a></li>
</ul>
</div>
<img id="imgCenter" src="bilder/header_960.jpg" width="960" height="314" alt="BILD" title="BILD"/>
<div id="textLeft">
<h3>Curabitur</h3>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed magna porta,
bibendum eros a, tristique nisi. Quisque velit ipsum, tempor fermentum porta sed, porta
vitae ante. </p>
<hr>
<h3>Maecenas</h3>
<img id="imgLeft" src="bilder/springa_s.jpg" width="80" height="68" alt="BILD" title="BILD"/>
<p class="text">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Nunc vestibulum egestas dolor, et feugiat felis mattis sit amet. Quisque vitae lorem nec arcu viverra
dictum. Proin sit amet porta est, quis pharetra turpis. Nulla fermentum tincidunt augue, non rhoncus augue
aliquet quis. Ut nec fringilla.</p>
<hr>
</div>
<div id="textRight">
<h3>Quisque velit</h3>
<img id="imgRight" src="bilder/farligt_s.jpg" width="170" height="109" alt="BILD" title="BILD"/>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed magna porta,
sökord bibendum eros a, tristique nisi. Quisque velit ipsum, tempor fermentum porta sed, porta
vitae ante. Vivamus vitae felis interdum, rhoncus libero sed, fermentum dolor. Nunc et ultrices lectus.
Proin imperdiet leo nibh, eu vehicula orci aliquam eget. Donec in accumsan felis.</p>
<p class="text">Nunc iaculis suscipit arcu, id auctor elit. Nullam sit amet quam faucibus, ornare metus
faucibus, fermentum metus. Maecenas metus tortor, ullamcorper at pulvinar eget, volutpat id metus.
Fusce aliquet nunc sollicitudin quam tempus, viverra faucibus magna egestas. Vestibulum eget ipsum mi.
</p>
<hr>
</div>
</div><!--End #maincontent-->
<div class="footer">
<p id="footerText">© 2013 Lorem Ipsum</p>
</div>
</div> <!--End #container -->
</body>
</html>