PureCSS-Gitterboxen nicht 100% hoch mit variablem Inhalt

Question

PureCSS-Gitterboxen nicht 100% hoch mit variablem Inhalt

8

Ich versuche, purecss (purecss.io) in WordPress zu integrieren, und ich habe Probleme, Gitterboxen auf 100% Höhe zu setzen. Ich wende einen grauen Hintergrund an (ungerade / gerade n-te-Kind-CSS-Eigenschaft) und es zeigt deutlich das Problem mit variablem Inhalt innerhalb der Boxen.

Wie setze ich die Boxen 100% hoch, damit ich den Hintergrund gleichmäßig anwenden kann?

In dem Screenshot möchte ich, dass die Gitterbox, die das Suchformular anzeigt, 100% hoch ist, so dass der gesamte Hintergrund grau ist.

%Vor%

Ich verwende mit diesem CSS-Code eine graue Hintergrundfarbe für ungerade Widgets

%Vor%

html css

pbu 23.09.2015, 13:23

quelle

7 Antworten

1

Hier habe ich einen Weg dies zu tun, mach zuerst diese divs display: table-cell . Dadurch werden sie gleich height . Und für die Reaktionsfähigkeit Ihrer Website bei niedrigeren mobilen Auflösungen können Sie die

@media -Abfrage verwenden, um die divs auf display: block

zurückzusetzen

Sehen Sie sich das Live-Beispiel an, was ich meine.

Sie sehen beide divs bei height aufgrund von display: table-cell , aber wenn Sie den linken Rand des Ergebnisfensters ziehen, um seine Breite kleiner zu machen , werden Sie bei Fensterbreite: 500px sie brechen in der nächsten Zeile. Sie können dieses Verhalten auch vollständig steuern, wie Sie möchten.

%Vor%

Rohit Kumar 26.09.2015 20:58

quelle

1

%Vor%

Arbeitsgeige Ссылка

Miomir Dancevic 28.09.2015 05:06

quelle

1

Das wird funktionieren, HTML

%Vor%

CSS

%Vor%

Arun 29.09.2015 04:30

quelle

1

Manchmal, um ein solches Layout zu haben, benötigen Sie absolute oder fixed Positionierung, ich würde für fixed gehen, da die div immer volle Höhe bleiben:

.widget_search { position:absolute; top:0; bottom:0; width:15em; }

William 30.09.2015 06:53

quelle

1

Dies kann mit Flex-Box erreicht werden. Ссылка

Es gibt zwei Teile für flexbox, den Container und die Objekte im Container

Setzen Sie Ihren Container, in diesem Fall widgets auf display:flex;

%Vor%

Dann erhalten die Elemente, die nebeneinander angezeigt werden sollen, die Eigenschaft flex-basis . Wenn Sie für jeden Wert den Wert 1 festlegen, bedeutet dies, dass die Größe des Objekts standardmäßig gleich ist. Wenn Sie beispielsweise 1 für die Suche und 2 für die Einträge festlegen, würden die Einträge versuchen, den doppelten Platz zu belegen

%Vor%

das ist ein sehr guter Artikel über die Flexbox Ссылка

dave.mcalpine 01.10.2015 22:24

quelle

1

Fügen Sie unten benutzerdefinierte CSS in Ihrem CSS hinzu.

%Vor%

Navtosh Adhikari 30.09.2015 10:51

quelle

Tags und Links html css

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Überlappender Schatteneffekt bleibt in der Navigationsansicht der Navigationsschublade erhalten

score 7 · Accepted Answer

Dies ist ein hervorragender Anwendungsfall für flexbox . Setzen Sie einfach die Eigenschaft display des Elternelements der Gitterelemente auf flex , wie folgt:

%Vor%

Und die Höhen der Gitterelemente werden normalisiert.

Wie bereits von anderen vorgeschlagen, können Sie möglicherweise auch ähnliche Ergebnisse erzielen, indem Sie die display -Eigenschaften der beteiligten Elemente auf die entsprechenden Tabellengegenstücke setzen, wodurch Ihr Grid im Wesentlichen zu einer falschen Tabelle wird.

Abgesehen davon gibt es keine Möglichkeit, Spaltenhöhen mit CSS zu normalisieren, ohne einen der Elemente aus dem Inhaltsfluss herauszunehmen, was nicht wünschenswert ist.

In%% verhält sich height: 100% nicht ganz so, wie man es erwarten würde. Jede prozentuale Höhe wird nicht in eine tatsächliche Höhe aufgelöst, es sei denn, ihr direkter Elternteil hat so explizit height deklariert, aber da Sie eine dynamische Inhaltshöhe haben, können / sollten Sie keinen statischen Wert festlegen.

Sie könnten dies umgehen, indem Sie Javascript verwenden, um height des Elternteils dynamisch auf die Höhe des größten Kindes zu setzen, so dass prozentuale Höhen in ihm arbeiten, aber das ist eine ganz andere Frage.