Die WordPress-Admin-Bar, welche am oberen Ende einer Website erscheint, sobald man als Admin eingeloggt ist, kann mitunter auch deren Layout in Mitleidenschaft ziehen. Dies kann u.a. der Fall sein, wenn ein Inhalts-Container eine Mindesthöhe von 100% des Viewports einnimmt, um z.B. mit solch einer CSS-Anweisung auch bei wenig Inhalt eine Hintergrundfarbe bis zum unteren Rand anzuzeigen:
#content {
min-height: 100vh;
background-color: #eef;
}
Sobald man als Admin eingeloggt ist, fügt WordPress nun diesen CSS-Code in den Head-Bereich ein:
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; }
}
Aufgrund des hinzugefügten Außenrandes von 32px bzw. 46px oberhalb von body erscheint daraufhin immer ein vertikaler Scrollbalken, auch dann wenn dies wegen einer geringeren Höhe des Inhaltes eigentlich nicht notwendig sein sollte. Möchte man die WordPress-Admin-Bar nicht komplett entfernen, kann man alternativ die Höhenangaben des Content-Containers korrigieren. Als Unterscheidungsmerkmal für den Selektoren verwenden wir hierzu die Klasse admin-bar, die dem body zugeordnet wird, sobald man als Admin eingeloggt ist:
<body class="... admin-bar ...">
Voraussetzung ist die Verwendung von body_class() in der betreffenden Template-Datei (oftmals die header.php):
<body <?php body_class(); ?>>
Mithilfe von calc() können wir nun den innerhalb von body.admin-bar befindlichen Inhaltscontainer in seiner Mindesthöhe um die Höhe der Admin-Bar kürzen:
#content {
min-height: 100vh;
background-color: #eef;
}
body.admin-bar #content {
min-height: calc(100vh - 32px);
}
@media screen and (max-width: 782px) {
body.admin-bar #content {
min-height: calc(100vh - 46px);
}
}
Danach sollte der vertikale Scrollbalken nur noch dann angezeigt werden, wenn die Höhe des Inhalts diesen notwendig macht.