!00% Fensterhöhe mit Head und Bottom

[Xen]

Hallo,

ich habe das Problem das ich eine Website Programmiere mit der Höhe von 100%. Der Footer soll hierbei immer am Ende stehen. D.h. wenn das Ende der Seite nur mit Scrollbar zu erreichen ist, soll er ganz unten stehen und wenn eben fast kein Inhalt vorhanden ist soll er immer am Bottom stehen.

Hier mal meine CSS:

  
html{  
	height: 100%;}  
  
body {  
	height:100%;  
	width:100%;  
	margin:0px;  
	padding:0px;  
	font-family:"Verdana", Arial, Helvetica, sans-serif;  
	color:#000000;  
	font-size:10px;  
	background-color:#f7b33a;  
	line-height:22px;  
	height:100%;  
	letter-spacing:0.01em;  
	background-image:url(../images/shadow.png);  
	background-position:center;  
	background-repeat:repeat-y;}  
  
#aussenwrapper {  
	height: 100%;  
	position: relative;  
	width: 650px;  
	margin: 0 auto;  
	background-image:url(../images/shadow.png);  
	background: #FFF;}  
  
#innenwrapper {  
	position:relative;  
	min-height:100%;  
	overflow:hidden}  
	  
#header {  
	top:0px;  
	left:0px;  
	width:650px;  
	height:200px;}  
  
#menu {  
	position: relative;  
	top:0px;  
	left:0px;  
	width:650px;  
	height:20px;  
	background-color: #f7b33a;}  
  
#image {  
	top:220px;  
	left:0px;  
	width:650px;  
	height:200px;}	  
  
#footer_index {  
	position:absolute;  
	bottom:0%;  
	left:0;  
	width:650px;  
	background-color:#FFF}  
	  
#footer {  
	position:relative;  
	bottom:0%;  
	left:0;  
	width:650px;  
	background-color:#FFF}  
	  
#content_index {  
	padding:50px 163px 0px 161px;  
	width:326px;  
	min-height:270px;  
	background: #FFF;  
	background-image:url(../images/bg.png);  
	background-repeat:repeat-x;}  
	  
#content {  
	padding:50px 50px 0px 50px;  
	width:550px;  
	min-height:270px;  
	background: #FFF;  
	background-image:url(../images/bg.png);  
	background-repeat:repeat-x;}  

hier die HTML

  
<div id="aussenwrapper">  
  
<div id="innenwrapper">  
  
<div id="header">  
  <a href="XXX"><img src="../images/header.gif" border="0" /></a></div>  
  
<div id="menu">  
XXX</div>  
  
<div id="image">  
<img src="../images/img/index.gif" /></div>  
  
<div id="content">  
Content  
</div>  
  
<span style="clear: left;"></span></div>  
  
<div id="footer">  
<img src="../images/bg_bottom.gif"/>  
</div>  
</div>  

Wenn es Seiten sind mit Scrollbar funktioniert das auch Wunderbar. Wenn dies zu wenig ist stellt er den Footer direkt unter den Text.

Ich hoffe mir kann jmd helfen

Danke im Voraus

[Xen]

Keiner eine Idee ? :P

Komme leider selbst nicht drauf

[Benjamin Buxbaum]

Hi Xen!

Hilft Dir das hier? CSS: Footer aller Art

mfG
Benjamin