HTML-Elemente über die komplette Seite ausweiten

Letzte Woche habe ich euch erklärt, wie ihr relativ schnell zu einem eigenen Off-Canvas-Menü gelangt. Da ich meinem Blog nun ebenfalls eine solch schicke Möglichkeit verpasst habe, sind mir bei der Umsetzung noch einige Punkte aufgefallen, die man unbedingt beachten sollte. Das Tutorial an sich funktioniert, unter gewissen Umständen, passt das Verhalten eventuell nicht. Um es auf den Punkt zu bringen: Sollte eure Webseite nach unten länger sein, als der Viewport des Browsers, so endet das Off-Canvas-Menü bündig mit dem Anzeigebereich. Unschön. Doch hierfür gibt es eine simple Lösung. Das Menü wurde absolut positioniert. Dies ist schon mal ein riesen Pluspunkt. CSS-Position verfügt über weitere Werte, darunter fixed und relative. Die Fixierung der Sidebar ist eher weniger empfehlenswert. Mobile Endgeräte kommen mit diesem Wert oft nicht zurecht. Daher bleibt einzig die Ausrichtung via absolute.

mein Blog auf dem Smartphone mit Off-Canvas-Menü
mein Blog auf dem Smartphone mit Off-Canvas-Menü

Glücklicherweise spielt diese Angabe prima mit relative zusammen. Setzt ihr jetzt das Body-Element entsprechend relativ, wird euer Layout keineswegs verändert, ausgenommen dem Außenabstand. Meist setzt man durch einen CSS-Reset diesen ohnehin Null. Die relative Umstellung wirkt direkt auf absolut positionierte Elemente und setzt im nachfolgenden Beispiel jeweils Breite als auch Höhe 100% zum Seiteninhalt und nicht zum Viewport. Schaut euch zur Veranschaulichung ebenfalls die Live-Demos an.

<body>
<div id="layer"></div>
</body>
body{
	height:2000px;
	width:2000px;
	position:relative;
	margin:0;
	padding:0
}
#layer{position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color:#000
}


Demo ohne position:relative


Demo mit position:relative

Dieses Prinzip könnt ihr auf alle möglichen Objekte übertragen, die in irgendeiner Weise eine relative Höhe, Breite oder beides erhalten sollen und über eine absolute Position verfügen. Der Trick ist sehr einfach und schnell realisiert. Zusätzlich spart diese Methode mitunter reichlich Ärger, gerade in Verbindung mit mobilen Endgeräten. Denn ansonsten müsste das Scrollen der Seite durch Aufruf des Menüs beispielsweise blockiert werden. Mittels JavaScript ist das zwar machbar, jedoch eher ein Krampf. Da ist der CSS-Ansatz deutlich schmerzfreier.


Avatar von reraiseace
Autor: Markus Werner (reraiseace) Twitterreraiseace, Google+reraiseace, Twittercb_werner
Ich bin Redaktionsvolontär bei der COMPUTER BILD in Hamburg, Fernstudent am Deutschen Journalistenkolleg und schreibe auf re{raise}ace privat über Webdesign und Programmierung. Seit 2015 schrieb ich auch regelmäßig für andere Medien.

0 Kommentare

Du kannst diesen Artikel nicht mehr kommentieren.