content <section>

Fixed Footer / Fixed Header Template

Handmade by monorom - HTML5 Template CSS2/CSS3.
Dowload FREE Template

Mit der CSS-Eigenschaft position:fixed können Seitenelemente an einer bestimmten Position im Fenster fixiert werden, sie scrollen nun nicht mit dem übrigen Seiteninhalt weg. Platzsparend ist dieses Layout nicht :) . Mit position:fixed können auch andere Design-Elemente fix positioniert werden. Siehe auch Intensivstation / Fixed Menu.

Fixe Footer und Header

Das Element wird mit position: fixed; aus dem Fluss des HTML genommen und liegt über den static positionieren Elementen. Fixe Positionen brauchen eine Breitenangabe. Wenn keine angegeben wird ist das Element so breit wie der Inhalt. Für die Position wird der Wert left, right, top, botton, center angegeben. Wertangaben können auch exakt in Pixeln oder dynamisch EM definiert werden.

header {
    background: #bbb;
    width: 100%; 
    position: fixed;
    left: 0;
    top: 0;
    border-bottom:1px solid #666;
    border-top:1px solid #666;
}

footer {
    background: #bbb;
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    border-bottom:1px solid #666;
    border-top:1px solid #666;
    }

Header und Footer haben einen div für die innere Textbreite. Fixe Positionen brauchen eine Breitenangabe, wird keine angegeben, ist das Element so breit wie der Inhalt. Für die Position wird der Wert in Pixeln oder EM definiert.

.inner{
    margin: 0 auto;
    padding: 20px;
    max-width: 1000px;
    min-width:700px;
    }

Inhalt

Die section#content zentriert das Layout. Die content Breite wird mit min-width und max-width angegeben, dadurch wird das Layout dynamisch.

section#content {
    background-color: #fff;
    max-width: 1000px;
    min-width:700px;
    margin:0  auto;
    padding: 200px 20px 130px;
    }

reset first

Am einfachsten lassen sich Positionen errechnen wenn alle Abstände auf "0" gesetzt sind. Mit CSS3 box-sizing kann bestimmt werden, dass der Innenabstand padding und der Rand border in width und height eingerechnet wird. Siehe auch intensivstation.ch/css3/box-sizing/

* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

This work is licensed under a Creative Commons License.