Jak mogę sprawić, by mój układ flexbox zajmował 100% miejsca w pionie?

102

Jak mogę sprawdzić, czy wiersz układu flexbox zajmuje pozostałą przestrzeń w pionie w oknie przeglądarki?

Mam 3-rzędowy układ flexbox. Pierwsze dwa rzędy mają stałą wysokość, ale trzeci jest dynamiczny i chciałbym, aby urósł do pełnej wysokości przeglądarki.

wprowadź opis obrazu tutaj

Mam inny flexbox w wierszu-3, który tworzy zestaw kolumn. Aby poprawnie dopasować elementy w tych kolumnach, potrzebuję, aby rozumieli pełną wysokość przeglądarki - na przykład kolor tła i wyrównanie elementów u podstawy. Główny układ ostatecznie przypominałby to:

wprowadź opis obrazu tutaj

.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>

Rozwiń fragment

Próbowałem dodać heightatrybut, który działa, gdy ustawię go na twardą liczbę, ale nie, gdy ustawię go na 100%. Rozumiem height: 100%, że nie działa, ponieważ zawartość nie wypełnia okna przeglądarki, ale czy mogę odtworzyć pomysł za pomocą układu flexbox?

html css flexbox

— Zła małpa w szafie
źródło

Głosuj za grafiką, jak je stworzyłeś?

— Jonathan

OmniGraffle i Pixelmator do retuszu.

— Evil Closet Monkey

Odpowiedzi:

115

Należy ustawić heightod html, body, .wrapperdo 100%(w kolejności do dziedziczenia pełnej wysokości), a następnie po prostu ustawić flexwiększą wartość niż 1do .row3, a nie na innych.

.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>

Rozwiń fragment

PRÓBNY

— G-Cyrillus
źródło

Czy jest jakikolwiek sposób, aby to zrobić, mając jednocześnie elementy div z treścią rozwijane, aby wypełnić ich zawartość? Tutaj rozwidliłem twój przykład .

— iameli

@iameli, użyj min-height dla chrome zamiast height fiddle.jshell.net/Lhhh3wde/1

— G-Cyrillus

JSFiddle jest brokowany

— Joel Peltonen

Oto działające demo codepen: codepen.io/mprinc/pen/JjGQvae i wyjaśnienie w podobnym pytaniu: stackoverflow.com/a/63174085/257561

— mPrinC

skrzypce zastąpione kodem, który nie powinien zniknąć, jest to kopia fragmentu. Zauważ, że minimalna wysokość nie jest już potrzebna w dzisiejszej wersji chrome.

— G-Cyrillus

ustaw owijkę na wysokość 100%

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

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

  height: 100%;
}

i ustaw trzeci rząd na elastyczny wzrost

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

próbny

— vals
źródło

W moim przypadku html, body, .wrapper {wysokość: 100%; } działa. nie tylko działa owijarka.

— gnganapath

Pokażę Ci inny sposób, który działa w 100%. Dodam też trochę dopełnienia dla przykładu.

<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;
   }

Jak widać, możemy to osiągnąć dzięki kilku opakowaniom do kontroli, wykorzystując atrybut flex-grow & flex-direction.

1: Kiedy nadrzędny „flex-direction” jest „wierszem”, jego potomny „flex-grow” działa poziomo. 2: Kiedy nadrzędny „flex-direction” jest „column”, jego potomny „flex-grow” działa pionowo.

Mam nadzieję że to pomoże

Daniel

— GaddMaster
źródło

divprzesada.

— Jan

Możesz usunąć jeden ze swoich flex-pad-y:)

— Eoin

Miły..! To jedyny przykład, w którym udało się sprawić, że moja „treść” <div> (między nagłówkiem a stopką) wypełniła całą wysokość ekranu. Wszystkie inne przykłady wydają się ignorować atrybut „wysokość: 100%”.

— Mike Gledhill

To fajne rozwiązania. Wiem, że John mówi powyżej DIV przesada, ale nie zgadzam się. Potrzebujesz czterech elementów div, aby wykorzystać wzrost flex zarówno w poziomie, jak iw pionie (pionowo był ważny!). Cieszę się, że mogłem pomóc! Posiadanie czterech DIV daje dużą elastyczność. Gdy zaczniesz próbować usunąć DIV, ta elastyczność zacznie zanikać!

— GaddMaster