Seite auf 100%

berti44 · #1 (**permalink**) 08.03.2011, 13:10

Hi, ich ein Anfänger, kann nur hoffen dass mir hier jemand hilft. Bin schon den ganzen Morgen dran die gefundenen Beschreibungen umzusetzen und komm zu keinem Ergebnis.
Ich möchte dass der footer immer unten am Bildschirm zu sehen ist also die Seite sich immer auf die Bildschirmhöhe ausdehnt.

Hier der Code meines letzten Versuchs:

Zitat:

<!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>Unbenanntes Dokument</title>
<style type="text/css">
body {
background-color: #CCC;
text-align: center;
margin: 0px;
padding: 0px;
height: 100%;
}
#container {
min-height: 100%;
text-align: left;
width: 1000px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
* html #container {
height: 100%;
}
#header {
background-color: #FFC;
height: 99px;
}
#navi {
background-color: #CFF;
}
#content {
background-color: #9F6;
height: 222px;
}
#footer {
position: relative;
background-color: #FFF;
}
</style>
</head>

<body>
<div id="container">
<div id="header">Raum für den Inhalt von id "header"</div>
<div id="navi">Raum für den Inhalt von id "navi"</div>
<div id="content">Raum für den Inhalt von id "content"</div>
<div id="footer">Raum für den Inhalt von id "footer"<br />
</div>
</div>
</body>
</html>

Was mach ich denn falsch?
Grüße aus Weilburg
Berti

PS ach ja, es sollte im Firefox und IE funktionieren

Manfred62 · #2 (**permalink**) 08.03.2011, 13:41

Entweder sticky footer:
New CSS Sticky Footer - 2010 - HTML for Bottom of Page Footer
oder fixed footer --> siehe Forums FAQ

Manfred

berti44 · #3 (**permalink**) 08.03.2011, 15:27

[QUOTE=Manfred62;489446]Entweder sticky footer:
New CSS Sticky Footer - 2010 - HTML for Bottom of Page Footer
oder fixed footer --> siehe Forums FAQ

Manfred[/QUOTE

Leider hilft mir deine Antwort nicht weiter, der Link zu der englischen Seite bringt mir nichts da ich da ich nicht genug Englisch kann.
Der Hinweiß auf Forums FAQ kann ich nicht nachvollziehen denn ich finde keine Seite "FAQ"
Hättest du mir den Code abgeändert könnte ich sehen was ich falsch gemacht habe.
Na ja es ist fast immer so in den Foren, da hat ein Anfänger eben nichts zu suchen, ich muß halt sehen wie ich ohne Fachmännische Hilfe zurecht komme.
Gruß Berti

uspri · #4 (**permalink**) 08.03.2011, 15:48

Immer diese Ausreden.

Hier ist die FAQ: http://xhtmlforum.de/40267-faq-h-ufi...ragen-und.html

vast · #5 (**permalink**) 08.03.2011, 16:36

Zitat:

Immer diese Ausreden.

Ich hab mich da auch schon blöd gesucht. Wenn man neu ist, geht man nicht unbedingt davon aus, das das ein Beitrag ist, sondern man durchsucht die Navi.
Mittlerweile bin ich aber auch schon drüber gestolpert.

Zitat:

Leider hilft mir deine Antwort nicht weiter, der Link zu der englischen Seite bringt mir nichts da ich da ich nicht genug Englisch kann.

Muss man auch nicht unbedingt, da sind rechts Links zum html und css, der Aufbau ist daraus eigentlich recht klar ersichtlich.

Für dein Dokument angewendet käme dabei sowas raus:

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=utf-8" />
<title>Unbenanntes Dokument</title>

<!--[if !IE 7]>
	<style type="text/css">
		#container {display:table;height:100%}
	</style>
<![endif]-->


<style type="text/css">

/*  
Sticky Footer Solution
by Steve Hatcher 
http://stever.ca
http://www.cssstickyfooter.com
*/

* {margin:0;padding:0;} 

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body {height: 100%;}

#wrap {
	min-height: 100%;
	
	background-color: #99FF66; /*grün hier*/	
}

#main {overflow:auto;
	
	padding-bottom: 50px; /* Höhe von footer */
}  
#wrap,#footer {
margin: 0 auto;
width: 1000px;
}


/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}

#header {
background-color: #FFC;
height: 99px;
}
#navi {
background-color: #CFF;
}
#content {
/*background-color grün entfernt, ist bei #wrap zur demonstration*/
height: 222px;
}

#footer {
position: relative;
background-color: #FFF;
margin: 0 auto;
margin-top: -50px; 
height: 50px; /* footer braucht zwingend feste Höhe */
clear:both;
}

</style>
</head>

<body>
<div id="wrap">
	<div id="main">
		<div id="header">Raum für den Inhalt von id "header"</div>
		<div id="navi">Raum für den Inhalt von id "navi"</div>
		<div id="content">Raum für den Inhalt von id "content"</div>
	</div>
</div>

<div id="footer">Raum für den Inhalt von id "footer"</div>

</body>
</html>

Ich habe die grüne Hintergrundfarbe von #content auf #wrap gelegt, evtl versteht man so besser was geschieht.

Die Sache funktioniert nur, wenn der Footer eine Höhe zugewiesen bekommt.

Klappt das?

berti44 · #6 (**permalink**) 08.03.2011, 18:32

Hallo vast,
Jetzt wo ich den Code sehe (der auch funktioniert), weiß ich dass ich das nie alleine hin bekommen hätte.
Vielen Dank für die Abänderung.
So sehe ich auch was ich garnicht beachtet habe (was auch in keiner Beschreibung stand, und glaub mir ich habe schon einige gelesen.
Genau wie die versteckte FAQ hier, da wird man drauf hingewiesen kann die aber nicht finden.
Wieso man nicht in die Navigation einen Button macht der suchende mit einem Klick zu der FAQ bringt ist unverständlich.

OK ich versuche nun den von dir abgeänderten Code durchzugehen und zu verstehen.

Mit Grüßen aus Weilburg und nochmals danke
Berti

fricca · #7 (**permalink**) 08.03.2011, 19:22

Fragen zu Darstellungsproblemen gehören in den Bereich CSS -- dort findest du auch die zugehörigen FAQ oben angeklebt.

Als Navigationspunkt ist das wenig geeignet, da es in diesem Board noch um sehr viel mehr Themenbereiche geht.

edit: Auf wunderbare Weise ist jetzt plötzlich ein FAQ-Link in der Navigation aufgetaucht. Hm -- halte ich nicht für sehr passend so allgemein.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Wordpress Seite Passwort-Schützen?	sepp88	Serveradministration und serverseitige Scripte	5	01.11.2009 12:56
Seite wird auf anderem Computer falsch dargestellt	Patrick Egli	CSS	3	01.11.2009 10:40
Shtml auf jeder Seite einbinden - counter	iVx	Serveradministration und serverseitige Scripte	1	13.09.2007 17:31
Fixer Header (CSS Frame) und Sprung zu Anker auf dieser Seite	Chico_wau	CSS	2	14.05.2007 18:08