Wie kann ich dafür sorgen, dass mein Flexbox-Layout 100% vertikalen Platz einnimmt?

102

Wie kann ich feststellen, dass eine Flexbox-Layoutzeile den verbleibenden vertikalen Platz in einem Browserfenster belegt?

Ich habe ein 3-reihiges Flexbox-Layout. Die ersten beiden Zeilen haben eine feste Höhe, aber die dritte ist dynamisch und ich möchte, dass sie auf die volle Höhe des Browsers anwächst.

Geben Sie hier die Bildbeschreibung ein

Ich habe eine andere Flexbox in Zeile 3, die eine Reihe von Spalten erstellt. Um Elemente in diesen Spalten richtig anzupassen, müssen sie die volle Höhe des Browsers verstehen - für Dinge wie Hintergrundfarbe und Elementausrichtungen an der Basis. Das Hauptlayout würde letztendlich so aussehen:

Geben Sie hier die Bildbeschreibung ein

.vwrapper {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: stretch;
    //height: 1000px;
}
.vwrapper #row1 {
    background-color: red;
}
.vwrapper #row2 {
    background-color: blue;
}
.vwrapper #row3 {
    background-color: green;
    flex 1 1 auto;
    display: flex;
}
.vwrapper #row3 #col1 {
    background-color: yellow;
    flex 0 0 240px;
}
.vwrapper #row3 #col2 {
    background-color: orange;
    flex 1 1;
}
.vwrapper #row3 #col3 {
    background-color: purple;
    flex 0 0 240px;
}

<body>
    <div class="vwrapper">
        <div id="row1">
            this is the header
        </div>
        <div id="row2">
            this is the second line
        </div>
        <div id="row3">
            <div id="col1">
                col1
            </div>
            <div id="col2">
                col2
            </div>
            <div id="col3">
                col3
            </div>
        </div>
    </div>
</body>

Erweitern Sie das Snippet

Ich habe versucht, ein heightAttribut hinzuzufügen , das funktioniert, wenn ich es auf eine harte Zahl setze, aber nicht, wenn ich es setze 100%. Ich verstehe, dass height: 100%es nicht funktioniert, weil der Inhalt das Browserfenster nicht ausfüllt. Kann ich die Idee jedoch mithilfe des Flexbox-Layouts replizieren?

html css flexbox

— Böser Schrankaffe
quelle

Upvote für die Visuals, wie hast du sie gemacht?

— Jonathan

OmniGraffle und Pixelmator für Nachbesserungen.

— Evil Closet Monkey

Antworten:

115

Sie sollten eingestellt heightvon html, body, .wrapperzu 100%(um zu erben volle Höhe) und legen Sie nur einen flexWert , der größer ist als 1zu .row3und nicht auf die anderen.

.wrapper, html, body {
    height: 100%;
    margin: 0;
}
.wrapper {
    display: flex;
    flex-direction: column;
}
#row1 {
    background-color: red;
}
#row2 {
    background-color: blue;
}
#row3 {
    background-color: green;
    flex:2;
    display: flex;
}
#col1 {
    background-color: yellow;
    flex: 0 0 240px;
    min-height: 100%;/* chrome needed it a question time , not anymore */
}
#col2 {
    background-color: orange;
    flex: 1 1;
    min-height: 100%;/* chrome needed it a question time , not anymore */
}
#col3 {
    background-color: purple;
    flex: 0 0 240px;
    min-height: 100%;/* chrome needed it a question time , not anymore */
}

<div class="wrapper">
    <div id="row1">this is the header</div>
    <div id="row2">this is the second line</div>
    <div id="row3">
        <div id="col1">col1</div>
        <div id="col2">col2</div>
        <div id="col3">col3</div>
    </div>
</div>

Erweitern Sie das Snippet

DEMO

— G-Cyrillus
quelle

Gibt es eine Möglichkeit, dies zu tun, während die Inhaltsbereiche erweitert werden, um ihren Inhalt zu füllen? Gab dein Beispiel hier .

— Iameli

@iameli, verwenden Sie min-height für Chrom statt height fiddle.jshell.net/Lhhh3wde/1

— G-Cyrillus

Die JSFiddle ist kaputt

— Joel Peltonen

Hier ist die funktionierende Codepen-Demo: codepen.io/mprinc/pen/JjGQvae und eine Erklärung in der ähnlichen Frage: stackoverflow.com/a/63174085/257561

— mPrinC

Geige ersetzt durch einen Codepen, der nicht verschwinden sollte, es ist eine Kopie des Snippets. Beachten Sie, dass in der heutigen Chromversion keine Mindesthöhe mehr benötigt wird.

— G-Cyrillus

Stellen Sie den Wrapper auf 100% Höhe ein

.vwrapper {
  display: flex;
  flex-direction: column;

  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;

  height: 100%;
}

und stellen Sie die 3. Reihe auf Flex-Grow

#row3 {
   background-color: green;
   flex: 1 1 auto;
   display: flex;
}

Demo

— vals
quelle

In meinem Fall HTML, Body, .wrapper {Höhe: 100%; } funktioniert. nicht nur Wrapper funktioniert.

— Gnganpath

Lassen Sie mich Ihnen einen anderen Weg zeigen, der zu 100% funktioniert. Ich werde auch einige Polster für das Beispiel hinzufügen.

<div class = "container">
  <div class = "flex-pad-x">
    <div class = "flex-pad-y">
      <div class = "flex-pad-y">
        <div class = "flex-grow-y">
         Content Centered
        </div>
      </div>
    </div>
  </div>
</div>

.container {
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  width: 100%;
  height: 100%;
}

  .flex-pad-x {
    padding: 0px 20px;
    height: 100%;
    display: flex;
  }

  .flex-pad-y {
    padding: 20px 0px;
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .flex-grow-y {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
   }

Wie Sie sehen, können wir dies mit ein paar Wrappern zur Kontrolle erreichen, während wir das Attribut flex-grow & flex-direction verwenden.

1: Wenn die übergeordnete "Flex-Richtung" eine "Zeile" ist, arbeitet das untergeordnete "Flex-Grow" horizontal. 2: Wenn die übergeordnete "Flex-Richtung" "Spalten" ist, arbeitet das untergeordnete "Flex-Grow" vertikal.

Hoffe das hilft

Daniel

— GaddMaster
quelle

divOverkill.

— John

Sie können eines Ihrer entfernen flex-pad-y:)

— Eoin

Nett..! Dies ist das einzige Beispiel, bei dem mein "Inhalt" <div> (zwischen Kopf- und Fußzeile) die gesamte Bildschirmhöhe ausfüllt. Alle anderen Beispiele scheinen das Attribut "height: 100%" zu ignorieren.

— Mike Gledhill

Es ist eine coole Lösung. Ich weiß, dass John oben DIV Overkill sagt, aber ich stimme nicht zu. Sie benötigen die vier Divs, um Flex Grow sowohl horizontal als auch vertikal nutzen zu können (vertikal war das Wichtigste!). Froh, dass ich helfen konnte ! Die vier DIVs bieten Ihnen viel Flexibilität. Sobald Sie versuchen, DIVs zu entfernen, schwindet diese Flexibilität!

— GaddMaster