CSS Footer Problem

newbie101 · 2. April 2012

Hallo,

ich habe ein Problem und hoffe ihr könnt mir helfen.
Ich versuche mich gerade ein wenig mit HTML und CSS und bin gerade dabei einmal das Grundgerüst einer Website zu erstellen.

Nun folgendes Problem: Ich habe alles in einen Wrapper getan, damit die Seite immer horizontal zentriert ist. Darin befinden sich dann noch die Divs Header, Content und Footer.
Ich möchte den Footer im am unteren Bildschirmrand darstellen. Egal wie hoch der Content ist. Sollte der Content größer sein als der angezeigte Bereich am Monitor, soll zwischen Content und Footer 20px Platz bleiben.

Habe schon einiges probiert. Footer bleibt entweder immer 20px darunter (dann ist er aber nicht ganz unten wenn nur wenig Content geschrieben ist) oder er befindet sich immer unten, aber dann ohne Abstand zum Content.
Hier der Code:

HTML:

<body>

<div class="wrapper">

    <div class="header"></div>
    
    <div class="content"></div>
    
    <div class="footer"></div>

</div>

</body>

Code:

body
{
	background-color: #000;
	margin-left: 0px;
	margin-top: 0px;
}

.wrapper
{
	position: absolute;
	left: 50%;
	margin-left: -450px;
	width: 900px;
}

.header
{
	position: relative;
	width: 900px;
}

.content
{
	position: relative;
	margin-top: 470px;
	width: 900px;
	height: 800px;
	background-color: #0CF;
}

.footer
{
	position: relative;
	bottom: 0px;
	width: 900px;
	height: 50px;
	background-color: #CCC;
}

Hoffe ihr versteht was ich meine und könnt mir helfen.Danke!

Hancock · 2. April 2012

Meine Idee wäre spontan:

Code:

.footer{
position:relative;
bottom:0;
}
.content{
margin-bottom:<Footer Height>+20 px;
}

Reglohln · 2. April 2012

Du arbeitest mit absoluter Positionierung, was man aber erstmal vermeiden sollte, wo es geht. Da gibts viele Probleme, vorallem mit verschiedenen Browsern.

Zentriere mit relativer Positionierung und gib dem wrapper mal ein bottom-padding (oder dem content eine bottom-margin) von 70px (50px vom footer + 20px abstand) und positioniere den footer mittels absoluter Positionierung am unteren Bildschirm.

Bin da schon etwas eingerostet und hoffe, dass es so in etwa klappt

Edit: Etwas zu langsam, aber auf absolute Positionierung solltest du trotzdem weitestgehend verzichten.

hexhector · 2. April 2012

Am Besten machst Du einen Screenshot, um Dein Anliegen präziser zu formulieren.

Du solltest mit "position:absolute" nur dann arbeiten, wenn es nicht anders geht.

Wenn Du dem Wrapper ein "margin: 0 auto;" gibst, wird er auch zentriert. Die Width für die inneren Container musst Du nicht wiederholen, es sei denn, sie sollen eine andere Breite als der Wrapper haben.

Es macht Sinn alle relevanten Elemente zu Beginn wenigstens mit "margin:0;padding:0;" zurückzusetzen.

newbie101 · 2. April 2012

So, habe hier mal 2 Screenschots gemacht.

1. Sollte der Content höher sein als der angezeigte Bereich, so passts eigentlich:
Siehe "ss_2.jpg".

2. Ist der Content aber relativ gering, so bleibt er zwar 20 px unter dem Content, aber da sollte er trotzdem ganz unten liegen:
Siehe "ss_1.jpg".

hexhector · 2. April 2012

Du willst den Footer also am unteren Viewport kleben haben!?

newbie101 · 2. April 2012

Ja, er soll im angezeigten Bereich immer ganz unten sein.
-wenig Content: Footer trotzdem am unteren Bildschirm rand
-viel Content: Erst sichtbar wenn man eben bis ans Ende gescrollt hat

Daaron · 3. April 2012

Reglohln schrieb:
Du arbeitest mit absoluter Positionierung, was man aber erstmal vermeiden sollte, wo es geht. Da gibts viele Probleme, vorallem mit verschiedenen Browsern.

Was für Browser denn? Holzklasse-IE6? Kein Mitleid, ernsthaft nicht... User mit Holzbrowsern muss man zu ihrem Glück zwingen. Außerdem würde ohne absolute Positionierung kaum ein Slider oder eine Suckerfish-Navi funktionieren.

Was das Problem selbst angeht, mal aus dem Kopf und ohne Test:
html,body
{
height: 100%;
}

.wrapper
{
min-height:100%;
}
.footer
{
position: absolute;
bottom:0;
height:30px; <- beispiel
}
.content
{
margin-bottom:30px; <- mindestens so viel wie der Footer hoch ist
}

Ich würd übrigens für wrapper, header, footer, content jeweils ne ID statt ner Klasse nehmen. Du hast eh nur einen Wrapper, einen Header,...

Reglohln · 3. April 2012

Daaron schrieb:
Was für Browser denn? Holzklasse-IE6? Kein Mitleid, ernsthaft nicht... User mit Holzbrowsern muss man zu ihrem Glück zwingen. Außerdem würde ohne absolute Positionierung kaum ein Slider oder eine Suckerfish-Navi funktionieren.

Ich habe geschrieben, dass man dort auf absolute Positionierung verzichten sollte, wo es geht. Ist es zwingend nötig, führt natürlich kein Weg dran vorbei.

Und absolute Positionierung führt immer wieder zu unerwünschten Ergebnissen. Egal welcher Browser. Man weiß vorher nie 100%ig, was passiert, auch wenn klar ist, was passieren sollte.

Und sorry, wenn ich das so sage: Ein guter Webdesigner erstellt Seiten auch für sehr alte Browser. Ob dann dort nur eine rudimentäre Seite ohne CSS zu sehen ist oder vllt sogar doch fast so aussieht, wie in aktuellen Browsern, ist natürlich ein andere Frage.

Und es gibt auch Tabletts und Smartphones. Wer weiß, wie es da mit absoluter Positionierung aussieht

Daaron · 3. April 2012

Indem du permanent Fallback-Lösungen für upgrade-unwillige Holzköpfe baust, verschwendest du nicht nur deine Zeit, du erziehst die User auch nicht dazu, endlich neue Technologien zu nutzen. Was denkst du, wieso Malware & Co so einen Erfolg haben? Weil User nicht upgraden. Hilf lieber mit, das Netz voran zu bringen, anstatt mutwillig Steine in den Weg zu legen.

Und was Tablets & Smartphones angeht: Die Apple-Produkte basieren auf Webkit via Safari -> HTML5+CSS3 wie in Chrome, absolute Spitze. Die Androiden basieren ebenfalls auf Webkit, hier direkt als Chrome-Ableger. Dazu kommt die Option, Mobile-Firefox zu installieren... wieder perfektes Rendering. Moderne Windows-Geräte basieren auf IE9 oder neuer, der kann auch den meisten guten Stoff, da gibts nur einige kleine Defizite.

Wenn du nicht abschätzen kannst, was bei einem absoluten Element passieren wird, dann solltest du noch etwas üben. Ne grobe Vorstellung sollte man schon haben, um n halbes Dutzend Pixel kann man immer noch korrigieren.

Reglohln · 3. April 2012

Es geht nicht nur um upgradeunwillige User. Denk an Firmen, in denen das schlicht und einfach nicht mal so eben upzugraden geht. Aber das ist eh eine ganz andere Sache jetzt. Da muss jeder selbst entscheiden, was er macht. Ich würde es persönlich immer versuchen, so viele Browser wie möglich zu unterstützen. Dafür bekommt man sein Geld, auch, wenn ich nicht zu dieser Berufsgruppe gehöre

Und wie ich bereits schrieb: Abschätzen schön und gut. Was letztendlich bei rauskommt, ist oftmals etwas anderes. Und jeder halbwegs gute Webentwickler wird der das bestätigen, dass absolute Positionierung dort nichts zu suchen hat, wo es nicht 100%ig notwendig ist. Klar funktioniert es auch, aber warum umständlich (und ich finde absolute Positionierung schon hier und da umständlich), wenns auch "einfacher" geht

Lass uns die Diskussion beenden. Mein Hinweis mit der Positionierung ging an den TE, der scheinbar ziemlicher Anfänger ist und Anfänger sollten ohnehin zunächst auf absolute Positionierung verzichten, bis der rest einigermaßen sitzt.

Daaron · 3. April 2012

Reglohln schrieb:
Es geht nicht nur um upgradeunwillige User. Denk an Firmen, in denen das schlicht und einfach nicht mal so eben upzugraden geht. Aber das ist eh eine ganz andere Sache jetzt. Da muss jeder selbst entscheiden, was er macht. Ich würde es persönlich immer versuchen, so viele Browser wie möglich zu unterstützen. Dafür bekommt man sein Geld, auch, wenn ich nicht zu dieser Berufsgruppe gehöre

Wenn ich ne Seite für Firmenkunden mache, bei denen ich gezielt mit Win2k/XP+IE6/7 rechnen muss, dann wird sowieso gleich ein ganz anderes Layout aufgezogen. Da darfst du z.B. noch nicht einmal PNG-Transparenz voraussetzen. JavaScript gibbet auch nicht, Flash für kleine Animationen ist auch kaum drin, selbst ne Suckerfish-Navi wird n Ding der Unmöglichkeit. Wer mit solchen Geräten an kommt kriegt dann auch ne Seite, die nach 1995 aussieht.

Die breite Masse an Projekten richtete sich aber eher an Endkunden, nicht an Geschäftskunden. Geschäftskunden geben den Kram in Auftrag, um ihre Werbefläche zu vergrößern etc.... hier ist es aber gerade wichtig, möglichst modern aufzutreten. Da kannst du dann einfach keine Einschnitte im Layout machen, nur weil irgendwo 1-2 Hanseln unbedingt noch mitm IE7 durchs Netz dümpeln und nichtmal n :hover auf was anderes als <a> können. Dann lieber 90% der Zielgruppe das bestmögliche Erlebnis präsentieren, anstatt für die anderen 10% den ganzen Code zu versauen. Das einzige echte Limit ist: Kann man die Seite im Lynx bedienen? Wenn ja: alles gut. Wenn nein: Wieso nicht?

Edit: Für das Problem mit Footer = Boden des Fensters gibt es nur die Lösung über position:absolute;bottom:0; Der TE kommt also zwangsweise mit der Positionierung in Berührung.
Ach ja: In meinem Code von letzter Nacht fehlt glaub ich noch ein
* {position:relative;}
Nur wenn html, body und wrapper gezielt eine Positionierung außer Static haben funktioniert der Rest vernünftig.

Reglohln · 3. April 2012

OK, da hast natürlich Recht. Aber je mehr Browser ich unterstützte, desto besser mein Gefühl

So handhabe ich das. Aber wie gesagt ist das eine Sache der persönlichen Einstellung und es ist ja nichts "böses", wenn man nur relativ aktueller Browser aktiv supportet.

Ja wenn er beim Footerproblem damit in Berührung kommt, ist es ja ok. Er kann es nicht umgehen. Aber er muss halt auch gleich verstehen lernen, damit er auch in Zukunft Dinge selbst aus dem Zusammenhang erkennen und coden kann. Zum lernen von CSS ist absolute Pos. dennoch einfach nicht das Wahre, wenn auch manchmal unvermeidbar.

T. Smith · 3. April 2012

Daaron schrieb:
Ach ja: In meinem Code von letzter Nacht fehlt glaub ich noch ein
* {position:relative;}

Du willst jetzt aber nicht wirlich alle Elemente relativ positionieren?

Daaron schrieb:
Nur wenn html, body und wrapper gezielt eine Positionierung außer Static haben funktioniert der Rest vernünftig.

Ein Containing Block sollte doch eigentlich reichen.

Daaron · 3. April 2012

T. Smith schrieb:
Du willst jetzt aber nicht wirlich alle Elemente relativ positionieren?

Muss man nicht, kann man aber. Relative verhält sich fast identisch zum Initialwert static. Die einzigen Unterschiede sind, dass
a) left, right, bottom & top verwendet werden können
b) absolut positionierte Elemente richten sich am nächstgelegenen nicht-statischen Elternelement aus

Ein Containing Block sollte doch eigentlich reichen.

Wahrscheinlich, ja. Ich würds nicht drauf anlegen.

T. Smith · 3. April 2012

Daaron schrieb:
Muss man nicht, kann man aber. Relative verhält sich fast identisch zum Initialwert static. Die einzigen Unterschiede sind, dass
a) left, right, bottom & top verwendet werden können
b) absolut positionierte Elemente richten sich am nächstgelegenen nicht-statischen Elternelement aus

Zu b) Stimmt. Damit schränkst du schonmal deine Möglichkeiten ein, denn so wird das Elternelement zwangsweise zum Containing Block.
Weitere Probleme: Ältere (aber noch relevante) IE-Versionen haben verschiedene Probleme. Das beginnt bei einem fehlerhaften Stacking Context und endet damit, dass relativ positionierte Elemente ohne hasLayout oft instabil sind. Einige dieser Bugs sind bei deinem Vorgehen nicht mehr zu umgehen.
Relative Positionierung ist außerdem nicht für alle Elemente definiert, da könnten auch moderne Browser uneinheitliches Verhalten zeigen.

Daaron schrieb:
Wahrscheinlich, ja. Ich würds nicht drauf anlegen.

Zur Positionierung wird nur ein Containing Block benötigt.

Daaron · 3. April 2012

Welche Elemente können keine relative Position einnehmen?

T. Smith · 3. April 2012

"Innere" Tabellenelemente (display: table-*)

Daaron · 4. April 2012

OK, das erklärt warum mir das nie aufgefallen ist.... ich nutz nahezu keine Tabellen mehr (außer natürlich für etwas, dass wirklich tabellarisch ist)

unXtremo · 6. April 2012

Hallo newbie101,
ich habe das mal mit Javascript und jQuery gemacht:

Code:

<!-- JQUERY -->
<script src="jquery-1.5.1.js"></script>
		
<script type="text/javascript">
$(document).ready(function(){
		
	function passe_hohe_an()
	{
		var h_title = $(".title").height();
		var h_content = $(".content").height();
		var h_footer = $(".footer").height();
		
		var h_window = $(window).height();
	
		if ( (100 + h_content + 25) < h_window)
		{
			ergebnis = h_window - 100 - 25 - 5;
			$(".content").height(ergebnis);	
		}
	}
		
	// gleich wenn Dokument geladen ist ausführen
	passe_hohe_an();
	
	// wenn die Fenstergröße verändert wird ausführen
	$(window).resize(function(){
		passe_hohe_an();
	});
});

</script>

Dabei hat mein Header eine Höhe von 100px, die Höhe des Contentbereichs ist variabel und mein Footer hat immer eine Höhe 25px
Es soll also die Höhe des Fensters ermittelt werden und dann die Höhe des Contents so angepasst werden, dass der Content immer die Fensterhöhe - Headerhöhe - Footerhöhe hat.
(was die 5 Pixel da noch sind weiß ich gerade nicht, die brauchte ich damal jedoch, weil ich sonst immer um diese 5 Pixel Scrollen musste)
Den Abstand zwischen Content und Footer kannst du denke ich durch ein padding-bottom: 20px; für deinen content machen.

CSS Footer Problem

Cadet 1st Year

Captain

Commander

Ensign

Cadet 1st Year

Anhänge

Ensign

Cadet 1st Year

Fleet Admiral

Commander

Fleet Admiral

Commander

Fleet Admiral

Commander

Lt. Junior Grade

Fleet Admiral

Lt. Junior Grade

Fleet Admiral

Lt. Junior Grade

Fleet Admiral

Ensign

Ähnliche Themen