[CSS] Footer strecken

Tobias · 23.02.2005, 00:43

Hallo zusammen,

leider stehe ich vor einem Problem, zu dem ich bisher keine Lösung gefunden habe.

Der HTML Code:

HTML-Code:

 <!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=iso-8859-1" />
   <title>Unbenanntes Dokument</title>
   <link href="style.css" rel="stylesheet" type="text/css" />
   </head>
   <body>
   <div id="layout">
   	<div id="wrapper">Raum für den Inhalt von id "wrapper"</div>
     <div id="main">
   		<div id="text">Raum für den Inhalt von id "text"</div>
     </div>
    </div>
   <div id="footer"></div>
   </body>
   </html>

Das Stylesheet

Code:

   html {
   height: 100%;
   }
   
   body {
   	margin: 0px;
   	padding: 0px;
   	text-align: center;
   	background-color: #85A6C5;
   	height: 100%;
   	background-image: url(backg1.jpg);
   	background-repeat: repeat-x;
   }
   
   div#layout {
   	width: 770px;
   	height: 100% auto;
   	margin: 0px auto;
   	text-align: left;
   	padding: 0px;
   }
   
   div#main {
   	margin: 0px;
   	padding: 0px;
   	height: 550px;
   	width: 770px;
   	text-align: center;
   	background-image:url(backgr2.jpg);
   	background-repeat: repeat-y;
   }
   
   /* internet explorer id hack */
   
   div#main[id] {
   	height: auto;
   	min-height: 550px;
   }
   
   div#text {
   	margin: 0px;
   	padding: 0px 10px;
   	height: 550px;
   	width: 750px;
   	text-align: left;
   }
   
   /* internet explorer id hack */
   
   div#text[id] {
   	height: auto;
   	min-height: 550px;
   }
   
   div#wrapper {
   	padding: 0px 10px;
   	margin: 0px;
   	height: 100px;
   	width: 750px;
   }
   
   div#footer {
   	margin: 0px auto;
   	height: 45px;
   	clear: both;
   	bottom: 0px;
   	background-color: #85A6C5;
   	background-image: url(footer.jpg);
   	background-repeat: repeat-x;
   }

Online auch hier zu finden.

Ich würde gerne erreichen, dass sich der Footer, auch in der Vollbilddarstellung, bis zum unteren Ende des Browserfensters streckt.

Über Vorschläge wäre ich sehr dankbar.

Gruß,

Tobias

Adromir · 23.02.2005, 07:58

Dem Footer anstatt einer festen Höhe eine relative mit % geben?

321 · 23.02.2005, 09:09

Mit dem IE6 bei 1024 x 768 muss ich scrollen, um den ganzen Footer zu sehn.

jackie_o · 23.02.2005, 09:23

im firebox im vollbildmodus ist der footer bei mir auch bis ganz unten

vielleicht hab ich das problem noch nicht ganz begriffen?

Boris · 23.02.2005, 09:38

http://www.alistapart.com/articles/footers

Tobias · 23.02.2005, 11:08

Danke für den Link. Das nehme ich mir mal gleich vor ....

Tobias · 23.02.2005, 11:37

Okay. Ich habe das Problem gelöst (wenn auch etwas unkonventionell).

http://yenodio.com/seychelles/style.css

http://yenodio.com/seychelles

Eigentlich recht simpler Trick, aber effektiv.

Dank min-height und IE [id] hack wächst der Inhaltscontainer auch mit.