CSS: DIV-Element mit 100% Höhe

Antu — Thu, 22 Oct 2009 06:00:32 +0000

Manchmal ist es gewollt, dass ein HTML-Element (meistens ein DIV) 100% der Höhe des Browser-Fensters einnehmen soll. Mit einem einfachen height:100%; ist es aber nicht getan. Wie man ein DIV-Element erstellt, dass 100% der Höhe des Browser-Fensters hat aber bei längerem Inhalt mitwächst, und was dabei zu beachten ist, erkläre ich in diesem Artikel.

Der Aufbau: HTML

Der HTML-Quelltext hierzu ist einfach, es wird ein DIV-Element erstellt, welches alle weiteren Inhalte umfasst. Dieses bekommt eine Klasse, oder besser eine ID zugewiesen, damit es leichter per CSS gestaltet werden kann.

    <body>
        <div id="wrapper">
            [...]
        </div>
    </body>

HTML und BODY

Damit, dem DIV nun einfach eine Höhe von 100% zuzuweisen, ist es noch nicht getan. Die 100% beziehen sich ja auf die Größe des Eltern-Elements, dem BODY, dieser braucht also auch eine Höhe von 100%. Das HTML-Element bekommt ebenfalls eine Höhe von 100%, schließlich ist es ja das Eltern-Element von BODY.

html, body {
    height:100%
}

Viele Browser geben dem HTML oder dem BODY-Element standardmäßig noch einen kleinen Innenabstand, so dass die Inhalte nicht direkt am Rand kleben. In diesem Fall ist das aber unerwünscht, denn einerseits soll das DIV-Element ja die ganze Höhe ausfüllen (ohne andersfarbige Ränder), und andererseits gäbe es sonst Scrollbalken (100% + 5px Innenabstand oben = mehr als 100% -> Scrollbalken).

html, body {
    margin:0;
    padding:0;
    height:100%
}

DIV-Element auf 100% der Höhe von BODY

Jetzt wo das BODY- und das HTML-Element auf 100% Höhe sind, muss nur noch das DIV-Element auf 100% Höhe gebracht werden:

#wrapper {
    /* Für moderne Browser */
    min-height:100%;
 
    /* Für den Internet Explorer 6 */
    height:auto !important;
    height:100%
}

Das Element soll eine Mindesthöhe von 100% haben, bei längeren Inhalten soll es sich von selbst vergrößern. Eine Mindesthöhe kann mit der CSS-Eigenschaft min-height angegeben werden, würde man hier height verwenden, würden moderne Browser nicht zulassen, dass das DIV-Element mit längeren Inhalten mitwächst, es wäre immer genau 100% hoch. Der Internet Explorer 6 hingegen versteht die height-Eigenschaft als Mindesthöhe, min-height kennt der IE 6 nicht.

Hier kann man sich die Tatsache zu Nutze machen, das der IE 6 !important etwas anders interpretiert als andere Browser. Zuerst legt man fest, dass die Höhe des Elements sich dem Inhalt anpassen soll (auto), und das diese Angabe alle anderen Angaben zur Höhe überschreibt (!important). Dann wird dem Element eine Höhe von 100% zugewiesen, was der IE 6 als Mindesthöhe interpretiert. Da der IE 6 das !important in diesem Fall ignoriert, verwendet er die zweite Angabe, und stellt eine Mindesthöhe von 100% ein. Alle anderen Browser beachten das !important, und ignorieren die zweite height-Angabe.

In Aktion sieht das dann so aus: Beispiel

Eine Fußzeile?

Wie erstellt man jetzt eine Fußzeile? Dazu wird ein DIV-Element mit der ID footer erstellt, dieses wird mit CSS wie folgt gestaltet:

#footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:2em
 }

Mittels position:absolute; wird festgelegt, dass das Element relativ zum nächsthöheren positionierten Element ausgerichtet wird. Mit bottom:0; bestimmt man, dass das Fußzeilen-Element ganz am unteren Rand vom wrapper-Element positioniert wird.

Nun muss dem wrapper-Element allerdings noch eine relative Positionierung zugewiesen werden, damit das Fußzeilen-Element sich darauf beziehen kann.

#wrapper {
    /* Für moderne Browser */
    min-height:100%;
 
    /* Für den Internet Explorer */
    height:auto !important;
    height:100%;
 
    position:relative
}

Der Inhalt selbst bekommt auch ein eigenes DIV-Element, welches einen Innenabstand so hoch wie die Fußzeile bekommt, so dass die Inhalte nicht unter der Fußzeile angezeigt werden.

    <body>
        <div id="wrapper">
            <div id="content">
                [Inhalte]
            </div>
            <div id="footer">
                [Inhalte der Fußzeile]
            </div>
        </div>
    </body>

Das CSS für das content-DIV sieht so aus:

#content {
    padding-bottom:2em;
}

Fertig sieht das dann so aus: Beispiel.

Farbkombinationen unter Gnome mit Agave

Antu — Wed, 21 Oct 2009 06:00:14 +0000

Agave ist ein kleines Gnome-Werkzeug mit dem sich Farbkombinationen finden lassen. Gerade beim Gestalten von Webseiten oder beim Erstellen von Bildern ist ist es wichtig, das Farben zueinander passen bzw. harmonisch wirken. Das Programm bietet mehrere Algorithmen zum Finden von Farben, und auch einen Zufallsgenerator. Die Farben lassen sich exportieren, und in einer Liste von Favoriten speichern.

Die Bedienung von Agave ist ziemlich intuitiv. Mittig links im Fenster ist eine Schaltfläche mittels derer man eine Farbe auswählen kann, die als Grundfarbe der Farbkombination dient. Daneben wird der Algorithmus zum Finden von passenden Farben bestimmt. Hier stehen folgende Möglichkeiten zur Auswahl: Komplementäre Farben, zwei halb-komplementäre Farben, Dreiergruppe, Vierergruppe, sinngemäße Farben und Einfarbig.

Es ist auch möglich die Grundfarbe aus 4 verschiedenen Paletten auszuwählen, die da wären: Websichere Farben, Tango Icon Palette, Gnome Icon Palette und Visibone. Oben finden sich außerdem Schaltflächen zum Verringern/Erhöhen von Sättigung und Helligkeit der Grundfarbe. Zusätzlich gibt es noch eine Schaltfläche für eine zufällige Grundfarbe.

Hat man eine Farbkombination gefunden, kann man die Farben mittels Doppelklick markieren und in der Favoritenleiste abspeichern. Die Favoriten lassen sich dann auch als GIMP-Farbpalette exportieren.

Die meisten Distributionen bieten Pakete für Agave an, unter Ubuntu genügt ein sudo apt-get install um es zu installieren.