Webmaster-Crashkurs

Layout für gesamte Höhe

Wenn wir den Fuß nun am Fuß des Browser haben möchten, müssen wir uns eines Kniffs bedienen. Dazu packen wir einen Wrapper um den Kopfbereich und Inhaltsbereich und geben diesen 100% Höhe mit. Damit der kommende Fuß nicht unterhalb des sichtbaren Bereichs sich befindet, wird der Fuß um seine eigene Höhe nach oben gesetzt. Dieses Vorgehen nun Schritt für Schritt.

Im ersten Schritt kommt der #wrapper um #kopfbereich und #inhaltsbereich

<div id="wrapper">

    <div id="kopfbereich">
        <p>Hier kommt der Kopfbereich mit Logo etc.</p>
    </div>

    <div id="inhaltsbereich">
        <h1>Beispiel f&uuml;r Layout mit 3 Bereichen</h1>
    	<p>Hier unser Inhalt</p>
    	<p>Und mehr Inhalt</p>
    </div>

</div>

<div id="fussbereich">
    <p>Fu&szlig;bereich</p>
</div>

Dadurch ändert sich erstmals noch nichts im Layout – alles hängt noch oben:

HTML-Vorlage für Erweiterung auf 100% Höhe

Jetzt wird dem Typ-Selektoren „html, body“ und dem Bereich #wrapper die Höhe über die CSS-Anweisung height:100%; mitgegeben

html, body {
    height:100%;
}

#wrapper {
    min-height:100%;
}

Dies hat den Effekt, dass der Fuß nach unten verschoben ist und nicht mehr sichtbar ist. Irgendwie ist es logisch, wenn der obere Bereich 100% annimmt.

CSS-Design mit 100% Höhe - Fußbereich außerhalb Browserfenster

Deshalb muss jetzt noch der Fußbereich um seine eigene Höhe nach oben gesetzt werden. Wir geben den #fussbereich eine Höhe mit (in CSS: height:1.5em;) und versetzten diesen über CSS mit margin-top:-1.5em;

#fussbereich {
    background-color: silver;
    height:1.5em;
    margin-top:-1.5em;
}

Und schon der Fußbereich seinen Namen verdient – er befindet sich am Fuß des Browsers. Ändern Sie die Größe des Browserfensters, wandert der Fußbereich ordnungsgemäß mit.

CSS-Design mit 100% Höhe - Fußbereich außerhalb Browserfenster

Und bei weniger Höhe des Browserfensters:

CSS-Design mit 100% Höhe - Fußbereich außerhalb Browserfenster

HTML5-Video-Kurs:
hier klicken für
mehr Informationen
© 2008-2024   •   www.webmaster-crashkurs.de - HTML5 Tutorial mit Videos • Impressum • Datenschutzerklärung
weitere eigene Projekte: