Vollbild-Theme und die WordPress-Toolbar

Die WordPress-Toolbar fügt folgenden Inline-CSS-Code hinzu:

<style type="text/css" media="screen">
    html { margin-top: 32px !important; }
    * html body { margin-top: 32px !important; }
    @media screen and ( max-width: 782px ) {
        html { margin-top: 46px !important; }
        * html body { margin-top: 46px !important; }
    }
</style>

Bei einem Vollbild-Theme mit einer Höhe von 100% stößt man dann auf Probleme durch das margin-top: 32px !important;.

Um das Problem zu umgehen hilft der nachfolgende Code. .site-container ist dabei das Element, das die 100% Höhe erhalten soll:

.admin-bar .site-container {
    height: calc(100% - 32px);
}

calc() ist ein CSS3-Feature, um einfache Berechnungen durchzuführen. Das Snippet berechnet die 100% minus der 32 Pixel der Adminleiste. Ein Blick auf caniuse.com zeigt, dass calc() durch alle gängigen Browser unterstützt wird.

Achtung: Die Toolbar ist responsive, d.h., bei einer Auflösung mit weniger als 782 Pixel Breite muss die Berechnung calc(100% - 46px) lauten.

Schreibe einen Kommentar