[How To] Fixierter Header und Footer

Ritzga

Hi Leute!

Wolltet ihr für eure Website nicht mal einen fixierten Header/Footer haben ?
Dann seit ihr hier genau richtig!

Zu aller erst brauchen wir ein solides HTML5 gerüst:

<!DOCTYPE html>
<html lang="en">
    <head>
    <style>

    </style>
    </head>
    <body>
        <header>
            <a href="#"><p>Ich bin ein Header</p></a>
        </header>
            <nav id="nav">
	            <ul>
		            <li><a href="">Link 1</a></li>
		            <li><a href="">Link 2</a></li>
		            <li><a href="">Link 3</a></li>
		            <li><a href="">Link 4</a></li>
		            <li><a href="">Link 5</a></li>
		            <li><a href="">Link 6</a></li>
	            </ul>
            </nav>
        <section>
        </section>
        <section>
        </section>
        <footer>
            <p>ICH BIN EIN FOOTER</p>
        </footer>
    </body>
</html>

dann brauchen wir nur den CSS3 Code dazu ;D (diesen in den Style Tag einfügen)

header 
{
	position: fixed; /*Die Position wird an das Browserfenster fixiert*/
	top: 0; /*Der Header wird direkt am oberen Rand plaziert*/
	width: 100%; /*Die Breite wird maximal eingestellt*/
	height: 90px; /*Die höhe wird auf 90 Pixel gesetzt*/
	background-color: #22c4c4;
	color: #fff;
	font-weight: bold;
    z-index: 1000; /*Der Z-index sorgt dafür, dass der Header über allem steht*/
    text-align: center;
}
footer
{
    position:fixed;
    bottom:0px; /*Der Footer wird direkt am unteren Rand plaziert*/
    width: 100%;
    height:70px;  /*Die höhe wird auf 70 Pixel gesetzt*/
	background-color: #22c4c4;
    color: #5CCCCC;
    text-align: center;
    z-index: 1000;
}

Durch "position:fixed" wird die Position des Objektes an das Browserfenster fixiert, dadurch ist es vollkommen egal wo man sich auf der Seite Befindet, aber der Header und Footer bleiben dort wo sie sich befinden.

Nun besitzt ihr einen fixierten Header und Footer ;D
Live-Demo: Klick Mich!

Kommentare, Verbesserung oder Wünsche bitte unter diesen Beitrag ;3