Share
Es gibt ein bekanntes Problem im Webdesign, das seit unserem Übergang vom Tischdesign in die CSS-Ära besteht, und zwar:
Wie kann ich in meinem flexiblen, mehrspaltigen Layout 100% Hintergründe haben??
Es gibt einige Lösungen für dieses Dilemma. Die, über die wir berichten werden, könnte jedoch für Ihr Projekt geeignet sein, wenn Sie Folgendes benötigen:
Eine Möglichkeit besteht darin, einen der schnellen, effizienten Website-Anpassungsdienste von Envato Studio zu bestellen. Sie können aus einer Vielzahl erfahrener Anbieter auswählen, deren Bewertungen überprüfen und ihnen dann die genauen Modifikationen zusenden, die Sie benötigen.
Ansonsten beginnen wir mit einem kurzen Blick auf das Problem.
Unten ist ein einfaches dreispaltiges Layout dargestellt, bei dem standardmäßig jede Spalte nach links verschoben wird. Wenn die Hintergründe standardmäßig verwendet werden, passen sich die Spalten wie folgt an die Höhe des Inhalts an:
Dies ist zwar funktional, aber aufgrund des erheblichen Höhenunterschieds nicht ganz das angenehmste Layout.
Der HTML-Code für das oben Genannte fügt drei "Spalteninhalt" -Elemente in einem Wrapper ein:
………
Das CSS für diese "Spalteninhalt" -Elemente lautet:
.Inhalt Breite: 60%; Schwimmer: links; Polsterung: 20px 30px; Hintergrund: #fff; Farbe: # 6d7072; .Sidebar Breite: 20%; Schwimmer: links; Polsterung: 20px 30px; Hintergrund: # 5f6673; Farbe: # ebeef3; Schriftgröße: 90%; .sidebar_two width: 20%; Schwimmer: links; Polsterung: 20px 30px; Hintergrund: # 434750; Farbe: # ebeef3; Schriftgröße: 90%;
Wenn wir uns auf Spalten mit gleicher Höhe beziehen, wollen wir normalerweise zwei Bedingungen erfüllen:
In unserem obigen Beispiel haben wir bereits die erste Bedingung der flexiblen Höhe erfüllt. Hintergrundstile und flexible Höhenregeln sind jedoch alle Teil derselben Klasse, die auf dasselbe Element angewendet wird. Unabhängig von der Höhe, für die dieses Element gilt, folgt auch der Hintergrund.
Wenn die Hintergründe unterschiedliche Höheneinstellungen haben sollen, benötigen wir separate Elemente, auf die wir die Hintergrundstile zusammen mit ihren eigenen Höhenregeln anwenden können. Um diese separaten Elemente zu erstellen, ohne zusätzliche Markierungen hinzuzufügen, verwenden wir Pseudoelemente.
Für jede Spalte verwenden wir die :Vor Pseudo-Selektor, um ein separates Pseudo-Element zu generieren, auf das Hintergrund-Styling angewendet wird. Wir verwenden dann eine Kombination aus absoluter Positionierung und z-index Hintergründe für jede Spalte hinterlegen und auf eine einheitliche Höhe setzen.
Das neue CSS für jede Spalte wird:
.Inhalt, .Inhalt: vor Breite: 60%; .content float: left; Polsterung: 20px 30px; Farbe: # 6d7072; .content: before content: "; position: absolut; oben: 0; unten: 0; z-index: -1; links: 0; Hintergrund: #fff;
.Seitenleiste, Seitenleiste: vorher width: 20%; .sidebar float: left; Polsterung: 20px 30px; Farbe: # ebeef3; Schriftgröße: 90%; .sidebar: before content: "; position: absolut; oben: 0; unten: 0; z-index: -1; links: 60%; Hintergrundfarbe: # 5f6673;
.sidebar_two, .sidebar_two: vorher width: 20%; .sidebar_two float: left; Polsterung: 20px 30px; Farbe: # ebeef3; Schriftgröße: 90%; .sidebar_two: before content: "; position: absolut; oben: 0; unten: 0; z-index: -1; links: 80%; Hintergrundfarbe: # 434750;
Das gibt uns schöne, gleichmäßige Säulenhöhen:
Kurz gesagt, was wir hier tun, ist die absolute Positionierung von "Hintergrundhalter" -Pseudoelementen hinter den regulären "Spalteninhalt" -Elementen, um Hintergrundstile zu erstellen.
Da diese "Hintergrundhalter" -Pseudoelemente absolut positioniert sind, können wir ihnen genau sagen, wo sich ihre Außenkanten befinden sollen, während die "Spalteninhalt" -Elemente immer noch die gewünschte Höhe oder Breite haben.
Das 
Accentsconagua
.wickeln Element, seine drei Kindelemente und ihre Pseudoelemente
Jedes Spaltenelement hat ein entsprechendes Pseudoelement, das als Hintergrund dientWichtig:Ihre Spalten sollten sich in einem übergeordneten Wrapper befinden (.wickeln In diesem Fall setzen Sie auf Position: relativ; damit die absolute Positionierung funktioniert. Dies sollte nach den schwebenden Spalten gelöscht werden, um sicherzustellen, dass die Hintergründe einen Höhenwert erhalten.
Es gibt einige großartige Ansätze, die andere Lösungsansätze für dieses Problem vorschlagen. Wenn Sie die besonderen Vorteile dieses Ansatzes nicht benötigen, ziehen Sie möglicherweise eine der folgenden Lösungen vor.
Wenn Sie planen, nur flache Farben in Ihren Hintergründen zu verwenden, ist es eine sehr clevere Lösung, einen horizontalen CSS-Verlauf anzuwenden und Farbbänder zu erstellen, die sich an Ihren Spalten ausrichten. Schauen Sie sich an, wie dank Chris Coyier.
Wenn Ihr Design jedoch Bilder, Ränder, CSS3-Effekte usw. benötigt, die auf Ihre Hintergründe angewendet werden, kann die Div-Technik "Hintergrundinhaber" möglicherweise besser geeignet sein, z.
Eine andere sehr coole Lösung ist die Verwendung der Pseudo-Selektoren :Vor und :nach dem auf dem übergeordneten Wrapper der Spalten, um bis zu drei Spalten mit gleichem Hintergrund zu erstellen. Sie können über diese Technik lesen, erklärt von Nicolas Gallagher.
Wenn Sie dagegen mehr als drei Spalten benötigen, können Sie stattdessen die Technik des "Hintergrundhalters" verwenden, da Sie so viele Spalten haben können, wie Sie möchten. z.B.
Sobald wir eine weit verbreitete Browser-Unterstützung für Flexbox sehen, sollte es recht einfach sein, solche Dinge zu tun, ohne sich auf Pseudo-Elemente verlassen zu müssen.
Bis dahin ist dies jedoch eine großartige Möglichkeit, um die Arbeit zu erledigen. Mit dieser Option können Sie flexible Breite für responsive Layouts beibehalten, beliebig viele Spalten verwenden und jede Art von Hintergrundstil verwenden.
