Das Layout einer Webseite ist der Prozess, um die Struktur und das Erscheinungsbild einer Website mithilfe von Markupsprachen wie HTML und CSS zu erstellen. Eine der häufigsten Aufgaben beim Layout besteht darin, Blöcke auf der Seite so zu platzieren, dass sie den gewünschten Platz einnehmen und ästhetisch ansprechend aussehen. In diesem Artikel werden wir uns ansehen, wie Aside-Blöcke am unteren Rand der Seite vertikal platziert werden.
Aside-Blöcke sind eines der beliebtesten Elemente des Webdesigns und können verwendet werden, um zusätzliche Informationen, Werbung oder andere Inhalte anzuzeigen, die nicht der Hauptinhalt der Seite sind. Die vertikale Platzierung solcher Blöcke am unteren Rand der Seite kann der Website ein ausgewogeneres und ästhetischeres Aussehen verleihen.
Es gibt mehrere Möglichkeiten, das gewünschte Ergebnis zu erzielen. Eine davon ist die Verwendung von CSS-Eigenschaften wie position und display. Mit diesen Eigenschaften können Sie die Position und Anzeige von Elementen auf einer Seite steuern. Wenn Sie beispielsweise Aside-Blöcke am unteren Rand der Seite platzieren möchten, können Sie sie auf position: absolute und bottom: 0 setzen. Dadurch werden die Blöcke an die untere Kante des übergeordneten Elements gedrückt.
Damit diese Methode jedoch ordnungsgemäß funktioniert, müssen Sie sicherstellen, dass das übergeordnete Element die richtige Höhe hat. Dazu können Sie verschiedene Methoden verwenden, z. B. das Festlegen der Höhe des übergeordneten Elements auf einen festen Wert oder die Verwendung der flexbox – display: flex-Eigenschaft. Dadurch können die Elemente den gesamten verfügbaren Platz im übergeordneten Element einnehmen und sie vertikal am unteren Rand der Seite ausrichten.
Das Konzept der vertikalen Platzierung
Mit der vertikalen Platzierung können Sie die Position der Elemente auf der Seite relativ zueinander steuern. Das Hauptziel der vertikalen Platzierung ist es, eine benutzerfreundliche und intuitive Benutzeroberfläche bereitzustellen.
Verschiedene Techniken können verwendet werden, um Elemente auf einer Seite vertikal zu platzieren. Sie können beispielsweise die CSS-Eigenschaft "display" verwenden: flex", mit dem Sie eine flexible und adaptive vertikale Struktur erstellen können.
In vertikaler Anordnung können Elemente in Spalten oder Zeilen angeordnet oder in flexible Designs kombiniert werden, abhängig von den Designanforderungen und der Funktionalität der Webseite.
Die vertikale Platzierung kann besonders nützlich sein, wenn Aside-Blöcke am unteren Rand der Seite platziert werden. Die richtige Platzierung dieser Blöcke ermöglicht ein ausgewogenes und ästhetisch ansprechendes Design der Webseite.
Durch die erfolgreiche vertikale Platzierung von Blöcken können Sie eine benutzerfreundliche Navigation erstellen und sicherstellen, dass der Platz auf der Seite effizient genutzt wird.
Notwendigkeit, Aside-Blöcke zu platzieren
Der Hauptzweck der Verwendung von Blöcken besteht darin, zusätzliche Informationen oder Inhalte bereitzustellen, die den Hauptinhalt der Seite ergänzen, aber erfolgreich in einen separaten Block eingefügt werden können. Dies kann eine Seitenleiste mit Sitelinks, Menüs, Anzeigen, Websiteinformationen, Social-Media-Widgets oder einem anderen Element sein, das kein wesentlicher Bestandteil des Hauptinhalts ist.
Das Platzieren von Blöcken am unteren Rand der Seite kann nützlich sein, wenn Sie dem Benutzer zusätzliche Informationen zur Verfügung stellen müssen, jedoch ohne den Hauptinhalt zu überlappen oder zu schattieren. Auf diese Weise kann der Benutzer bei Bedarf zusätzliche Informationen sehen, aber der Hauptinhalt bleibt dabei im Mittelpunkt.
Die Verwendung von Blöcken hilft dabei, die Webseite strukturierter und benutzerfreundlicher zu gestalten, und verbessert die Verfügbarkeit und die Erfüllung der Benutzeranforderungen. Das vertikale Platzieren von Blöcken am unteren Rand der Seite ist eine Möglichkeit, ein effizientes und harmonisches Design zu erstellen, das die Benutzererfahrung verbessert.
Die wichtigsten Methoden der vertikalen Platzierung
Es gibt mehrere grundlegende Möglichkeiten, Aside-Blöcke am unteren Rand der Seite vertikal zu platzieren. Betrachten wir jeden von ihnen:
1. Absolute Positionierung verwenden. Dazu können Sie dem Aside-Block die folgenden Stile zuweisen:
2. Verwenden von Flexboxen. Um dies zu tun, können Sie alle Blöcke, die Sie am unteren Rand der Seite platzieren möchten, in einen Container mit einem bestimmten Stil einwickeln:
3. Verwenden von Grids. Um dies zu tun, können Sie alle Blöcke in einen Container mit einem bestimmten Stil einwickeln:
grid-template-rows: 1fr auto;
Dies sind die wichtigsten Möglichkeiten, Aside-Blöcke vertikal am unteren Rand der Seite zu platzieren. Die Wahl einer bestimmten Methode hängt von den Anforderungen und Zielen Ihres Projekts ab.
Methode 1: Position: absolute
Die erste Methode, die wir in Betracht ziehen werden, basiert auf der Verwendung der CSS-Eigenschaft position: absolute. Mit dieser Eigenschaft können wir Elemente auf der Seite genau positionieren, relativ zum übergeordneten Container oder sogar zum Browserfenster.
Um Blöcke mit dieser Methode vertikal am unteren Rand der Seite zu platzieren, müssen wir zuerst einen gemeinsamen übergeordneten Container für diese Blöcke erstellen. Dann können wir die folgenden Stile anwenden:
| Stil | Die Beschreibung |
|---|---|
| Legt den übergeordneten Container als Kontext für die Positionierung der untergeordneten Blöcke fest | |
| Positioniert den Block absolut am untersten Rand des übergeordneten Containers |
So wird ein Beispielcode aussehen:
Diese Methode ist einfach und effektiv, da nur wenige CSS-Regeln erforderlich sind, um das gewünschte Ergebnis zu erzielen. Es kann jedoch Einschränkungen haben, wenn der Inhalt des Blocks außerhalb der Größe des übergeordneten Containers liegt.
Methode 2: Flexbox
.container .main-content .asideZuerst wickeln wir den gesamten Inhalt der Seite in einen Container mit einer Klasse ein container. Installierter display: flex; für den Container, um den Flexbox-Modus zu aktivieren. Dann installieren wir flex-direction: column;, damit die Elemente im Container vertikal angeordnet sind. Wir installieren auch min-height: 100vh; damit der Container die gesamte Höhe des sichtbaren Bereichs ausfüllt.
Dann haben wir einen Block mit einer Klasse main-content, die den gesamten verfügbaren Platz im Container belegen wird. Wir installieren flex-grow: 1;, damit es sich ausdehnt und den verbleibenden Raum füllt.
Am Ende haben wir einen Block mit einer Klasse aside, die sich unter dem Block befindet main-content dank der Eigenschaft margin-top: auto;. Es schiebt den Block nach unten, bis er die untere Grenze des Containers erreicht.
Das Ergebnis ist eine vertikale Platzierung der Blöcke aside am unteren Rand der Seite. Jetzt können Sie die Flexbox-Methode verwenden, um elegante und flexible Layouts auf Ihren Webseiten zu erstellen.
Methode 3: Grid
Sie können die CSS-Grid-Technologie verwenden, um Aside-Blöcke vertikal am unteren Rand der Seite zu platzieren. Mit CSS Grid können Sie Gitter mit komplexen Strukturen erstellen und deren Anordnung leicht steuern.
Zuerst müssen Sie einen Container erstellen, in dem die Aside-Blöcke platziert werden. In diesem Container verwenden wir die Eigenschaft display: grid, um ein Raster zu erstellen. Dann geben wir die gewünschte Anzahl von Zeilen und Spalten mit den Eigenschaften grid-template-rows und grid-template-columns an.
Um Aside-Blöcke am unteren Rand der Seite zu platzieren, können wir dem Container eine Zeile zuweisen, die den gesamten verfügbaren Platz belegt. Verwenden Sie dazu die Eigenschaft grid-template-rows: 1fr . Dann legen Sie die Eigenschaft grid-row für Aside-Blöcke auf 1 fest, damit sie diese Zeile belegen.
.container .aside In diesem Beispiel werden die Aside-Blöcke in einheitlicher Reihenfolge am unteren Rand der Seite platziert. Sie können die Anzahl der Spalten ändern, indem Sie den Wert der grid-template-columns-Eigenschaft ändern, um sie an Ihre Anforderungen anzupassen.
Methode 4: CSS-Tabellen
Um diese Methode anzuwenden, müssen Sie einen Wrapper für Aside-Blöcke erstellen und diese Eigenschaft festlegen display: table. Dann muss jeder Aside-Block eine Eigenschaft festlegen display: table-cell. Um die Blöcke am unteren Rand der Seite zu platzieren, müssen Sie die Eigenschaft für den Wrapper festlegen vertical-align: bottom.
.wrapper .aside-block .wrapper In diesem Beispiel werden die Aside-Blöcke vertikal am unteren Rand der Seite platziert.
