Footer (Fußzeile) immer unten.

Problem:

Man legt auf einer HTML-Seite einen Footer an und dieser rutscht, sollte der Inhalt nicht so lang sein, in die Mitte o. in des untere drittel des Bildschirms. Er bleibt auf alle fälle nicht unten, wie man es erwartet.

Lösung 1

Man setzt die Eigenschaften des Footer auf "psoition: fixed;", was aber nicht so schön ist weil der Footer dann immer unten bleibt. Egal wie lange der Text ist, der Footer ist unten und überdeckt ggf den Text.

Lösung 2

Die ist, meiner Meinung nach die Beste und ich werde sie hier erklären. Wie es funktioniert, worauf man achten sollte usw.. Diese Lösung ist zwar etwas arbeitsintensiever aber es lohnt sich.

1. Schritt

Wir legen eine Schale um den Inhalt und lassen der Footer außen vor. Dumm ausgedrückt, aber wem was besseres einfällt kann mir das mailen. So nun zum Beispiel:

<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen"/>
<title>Footer unten</title>
</head>
<body>
<div id="wrapper">

<header>
<p>HAEDER</p>
<nav>
<a href="index.html">Bsp.1 </a>
<a href="bsp2.html">Bsp.2</a>
</nav>
</header>

<article>
<h1>ARTICLE</h1>
<h1 style="color:red;">WRAPPER</h1>
<p>Beispieltext kurz.</p>
</article>

</div> <!-- ENDE vom Wrapper -->

<footer>
<p>FOOTER</p>
</footer>
</body>
</html>

So, oben das übliche, HTML, HEAD mit Links zu den Stylesheets usw..

Ab dem BODY-Tag wirds interessant, weil hier legt man eine Box an (div) mit einer ID, in meinen Fall "wrapper", welche den Bereich außerhalb des FOOTERS umschließt.

Hier ist es der rot umrandete Bereich (HEADER, ARTICLE) in der Praxis sind da keine Grenzen gestezt. Siehe Bild:

2. Schritt

Nun zu lustigen Teil des Tutorials, den CSS:

body {
	font-size:16px;
}
#wrapper {
	min-height: calc(100vh - 5em - 6px);
	border:3px solid red;
}
header {
	position relative;
	display:table-cell;
	vertical-align:middle;
	width:calc(100vw - 6px);
	height:6em;
	background-color:#e06624;
	top:0;
	left:0;
	text-align:center;
}
nav {
	position:relative;
	left:0;
	bottom:-1em;
	display:table-cell;
	vertical-align: middle;
	width;100vw;
	height:2em;
	background-color:#e06624;
}
nav a {
	font-family: Arial, Helvetica, sans-serif;
	font-size:1em;
	color:#ffffff;
	text-decoration:none;
	padding-left:2em;
}
nav a:hover {
	color:#ece4e4;
}
header p, footer p {
	color:#ffffff;
	font-family: Arial, Helvetica, sans-serif;
	font-size:2em;
	font-weight:bold;
}
article {
	position relative;
	width:calc(100vw - 3em - 6px);
	background-color:#ffffff;
	padding:1em;
}
article p {
	font-family: Arial, Helvetica, sans-serif;
	font-size:1.5em;
	font-weight:bold;
}
article h1 {
	color:#000000;
	font-family: Arial, Helvetica, sans-serif;
	font-size:2em;
	font-weight:bold;
	text-align: center;
}
footer {
	position:relative;
	display:table-cell;
	vertical-align:middle;
	width:100vw;
	height:5em;
	background-color: #000000;
	text-align:center;
}

Das was und eigentlich interessieren sollte ist die ID "wrapper" (#wrapper), hier wird die minimale Höhe des "wrappers" auf 100% des sichtbaren Bereiches festgelegt (vh).

Jetzt kommt eine Möglichkeit die man seit HTML5 eingeführt hat, nähmlich "calc". Man kann ENDLICH mal absolute (px,pt,cm usw.) mit relativen (em, %, vh, usw.) kombinieren.

In diesen Fall sagen wir den Browser: "Wenn der Inhalt nich mehr Platz braucht nimm 100% der sichtbaren Höhe und ziehe davon die Höhe des Footers (5em) und den Rahmen des Footers (6px, 3px unterer Rahmen, 3px oberer Rahmen) ab."