Wie stelle ich den Vollbild-Hintergrund auf ein Element fester Breite ein?
Ich habe eine einfache Struktur des Elementcontainers dynamische Höhe und feste Breite ( Markup unten). Der Hintergrund des Elements sollte sich einerseits über die gesamte Fensterbreite erstrecken, andererseits muss die Größe der Kinder durch den Container begrenzt sein ( Gewünschtes Layout ). Die Anzahl der Kinder und ihre Größe (die nur aus Gründen der Einfachheit auf dem Bild gleich sind) sind dynamisch.
Ist das möglich ohne zusätzlichen Container? Ich möchte verhindern, dass die gewünschte Elementinhaltsbreite erreicht wird, indem width auf die untergeordneten Elemente gesetzt wird, da ihre Anzahl dynamisch ist und die Größenverhältnisse nur schwer zu schreiben sind, wenn ihre Gesamtbreite bereits durch container width begrenzt ist.
Hier ist ein Stift zum Experimentieren;
Auszeichnung
%Vor% Gewünschtes Layout (das Leerzeichen zwischen Kindern und Containern ist irrelevant)
2 Antworten
Eine Lösung, die wir zur Lösung dieses Problems nutzen können, ist die Verwendung der Ansichtsfensterbreite im übergeordneten Container-Padding, um die Kinder in eine Box zu zwingen, die nur 500 Pixel breit ist (gemäß Ihrem Codepen).
Wichtig dabei ist, dass box-sizing:border-box; für den Container gesetzt werden muss, sonst wird padding ballistisch.
Dazu verwenden wir calc , vw und padding .
Hier ist der vollständig erweiterte Code Ihres Containers auf dem verknüpften Codepen:
%Vor%Hier ist eine funktionierende Version des CodePen , und um alle meine Eier in einem Korb zu behalten, hier ist ein erweiterbares Code-Snippet:
Ich möchte abschließend darauf hinweisen, dass, wenn jemand anderes eine bessere Lösung hat, Sie sich stattdessen die Zeit ansehen möchten, da es bei älteren Versionen von vw in calc gibt href="http://caniuse.com/#feat=viewport-units"> Chrome und Safari .
BEARBEITEN:
Wie in den Kommentaren von Vadim und Robert erwähnt, gibt es ein paar Dinge, die einige Probleme verursachen können.
Erstens, vorausgesetzt, Sie arbeiten mit einer minimalen Vorlage (d. h. keine normalize / reset.css), wird Ihr Körper wahrscheinlich immer noch die inhärenten Ränder haben, die sich mit dieser Art von Layout vermischen würden. Sie können dies beheben mit:
%Vor% Zweitens, abhängig von Ihrem Betriebssystem (Ja, ich sehe Sie an Microsoft!) können Ihre Bildlaufleisten Ihren Inhalt zur Seite schieben, während sie gleichzeitig in die Berechnung für vw einbezogen werden.
Wir können das auf zwei Arten beheben. Die erste ist eine Anpassung der Padding-Berechnung, um die Bildlaufleiste einzuschließen, aber Sie müssten ein Skript schreiben, um sicherzustellen, dass die Bildlaufleiste tatsächlich vorhanden ist. und Bildlaufleisten unterscheiden sich in der Größe (IE - & gt; 17px, Kante - & gt; 12px).
Die andere Alternative wäre die Verwendung eines benutzerdefinierten Inhalts-Scrollers, der einen vollständigen overflow:hidden; über dem Inhalt macht und dadurch die Bildlaufleiste löscht, bevor die eigene Version einer Bildlaufleiste implementiert wird (die im Allgemeinen über dem Inhalt liegt) mit einem position:fixed; ) es.
Mit vw und flex können wir die untergeordneten Elemente zentrieren und genau das erreichen, was Sie benötigen. Ich habe ein JSfiddle geschrieben, wo du es dir anschauen kannst.
Grundsätzlich habe ich einen Container erstellt, dessen Anzeige auf flex eingestellt ist. Mit der margin -Eigenschaft des ersten untergeordneten Elements habe ich alle anderen untergeordneten divs zentriert und dann die regulären Eigenschaften anderen divs hinzugefügt.
Hier ist der Code