Div-Höhe über gesamte Website nicht nur den Viewport

Hallo,

Ich probier und such seit Stunden, um mein Navigations-Div auf 100% Seiten Höhe zu bringen, jedoch ohne Erfolg.
Egal ob ich html, body oder sonstigen Tags 100% Height gebe oder nicht, der Body Bereich ist ab dem rosa-Div beendet.

Wer Weiss Wie man das Navi-Div (Links und blau) auf 100% Seitenhöhe kriegt?

Vielen Dank im Voraus

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>GesamtLayout Zmugg</title>

<style type="text/css">


*{margin:0;}

html {height:100%;}

body{
	    position: relative;
	    width: 1366px;
	    min-height:100%;
	    height:100%;
	    left: 50%;
	    transform:translateX(-50%);
	    margin:0px;}

#left{background-color:#39F;
	float:left;
	width:335px;
	height:100%;
	min-height:100%;}

#right{background-color:#BFCADB;
	float:left;
	width:1031px;
	height:100%;
}

#slider{background-color:#FF9;
	position:relative;
	width:1031px;
	height:571px;
	}

#news1{background-color:#CF9;
	float:left;
	width:515px;
	height:380px;}

#news2{background-color:#6F6;
	float:left;
	width:515px;
	height:380px;}

#team{background-color:#F9F;
	float:left;
	width:1031px;
	height:360px;}

#start1{background-color:#69F;
	width:515px;
	height:380px;
	float:left;}

#start2{background-color:#06F;
	width:515px;
	height:380px;
	float:left;}


#footer{background-color:#0F6;
	width:100%;
	height:50px;
	position:relative;}

</style>

</head>
<body>
<div id="left"></div>
<div id="right">
	<div id="slider"></div>

     <div id="news1"></div>

     <div id="news2"></div>

     <div style="clear:both"></div>

     <div id="team"></div>

     <div id="start1"></div>

     <div id="start2"></div>

     <div style="clear:both"></div>

     <div id="footer"></div>

</div>
</body>
</html>