Footer soll unten bleiben!

lddd · 8 Juni 2011

Hallo,

folgendes Problem. Ich möchte gerne meinen Footer so positionieren das er bei genügend Platz (kein Scrollen nach unten nötig) fest unten stehen bleibt und bei Seiten mit Längeren Texten der Footer mit nach unten rutscht so das die Texte in den oberen Containern (falls sehr lang) nicht durch den Footer durch gehen. So ist es nämlich momentan

Bei Seiten mit wenig Content ist das so ok, aber bei langen Texten dann halt nicht mehr.
Der Footer Layer befindet sich außerhalb des Hauptcontainers.

Code:

footer {
    position:absolute
    clear:both;
    float:left;
    width:100%;
    bottom:0;
}

Für eure Hilfe wäre ich sehr dankbar.

Marv · 8 Juni 2011

Hallo,
ich hatte letztens schon mal sowas in der art zusammen gebastelt:

HTML:

<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
body { background-color: #DFDFF7; 
    position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px;
    width: 100%; height: 100%; margin: 0px; padding: 0px; }
#used { margin: 0 auto; padding: 0px; 
        width: 950px; top: 0px; height:100%;}
#menu {    width:950px; position:absolute; background-color: yellow; top: 0px; height: 30px; padding: 0; margin: 0;  }
#data {    background-color: blue; width:950px; min-height:100%; margin-top:-20px;}
.content	{margin-top:55px; float:left;}
.footer	{ bottom:0px; height:20px; background:orange; width:950px;}
.clear	{
clear:left;
}
</style>


 <!--[if lte IE 7]>
        <style type="text/css">
body { 
     margin-top:-20px;
}
#menu {    
	margin-top:21px;
}
        </style>
    <![endif]-->


<title>Titel</title>
</head>
<body>

<div id="used">
<div id="menu">Platzhalter für Menü</div>
	<div id="data">
		<div class="content">
			Daten (der Hauptteil) soll bis unten gehen und vernünftig scrollen
			
			
		</div>
		<div class="clear"></div>
	</div>
	<div class="footer">Hier kommt das Copyright</div>
</div>

</body>
</html>

Ich hoffe, dass ist das wonach du suchst, ansonsten schilder nochmal genauer den Unterschied bzw. was du genau brauchst.

Footer soll unten bleiben!

lddd

Neues Mitglied

Marv

Mitglied

Neueste Beiträge