¿Cómo puedo hacer que mi diseño de flexbox ocupe un 100% de espacio vertical?

102

¿Cómo puedo saber que una fila de diseño de caja flexible consume el espacio vertical restante en una ventana del navegador?

Tengo un diseño de caja flexible de 3 filas. Las dos primeras filas son de altura fija, pero la tercera es dinámica y me gustaría que creciera hasta la altura completa del navegador.

ingrese la descripción de la imagen aquí

Tengo otra caja flexible en la fila 3 que crea un conjunto de columnas. Para ajustar correctamente los elementos dentro de estas columnas, necesito que comprendan la altura completa del navegador, para cosas como el color de fondo y las alineaciones de los elementos en la base. El diseño principal finalmente se parecería a esto:

ingrese la descripción de la imagen aquí

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

Expandir fragmento

Intenté agregar un heightatributo, que funciona cuando lo configuro en un número fijo pero no cuando lo configuro en 100%. Entiendo height: 100%que no funciona, porque el contenido no llena la ventana del navegador, pero ¿puedo replicar la idea usando el diseño de flexbox?

html css flexbox Mono malvado del armario
fuente

Vota a favor de las imágenes, ¿cómo las hiciste?

Jonathan

OmniGraffle y Pixelmator para retoques.

Evil Closet Monkey

Respuestas:

115

Debe establecer heighten html, body, .wrapperto 100%(para heredar la altura completa) y luego establecer un flexvalor mayor que 1to .row3y no en los demás.

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

Expandir fragmento

MANIFESTACIÓN

G-Cyrillus
fuente

¿Alguna forma de hacer esto mientras también se expanden los divs de contenido para completar su contenido? Bifurcó su ejemplo aquí .

iameli

@iameli, use min-height para chrome en lugar de height fiddle.jshell.net/Lhhh3wde/1

G-Cyrillus

El JSFiddle se rompe

Joel Peltonen

Aquí está la demostración de codepen de trabajo: codepen.io/mprinc/pen/JjGQvae y una explicación en la pregunta similar: stackoverflow.com/a/63174085/257561

mPrinC

violín reemplazado por un codepen que no debería desaparecer, es una copia del fragmento. Tenga en cuenta que la altura mínima ya no es necesaria en la versión de Chrome actual.

G-Cyrillus

establecer la envoltura a la altura del 100%

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

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

  height: 100%;
}

y configurar la tercera fila para flex-grow

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

manifestación

vals
fuente

En mi caso, html, body, .wrapper {altura: 100%; } está trabajando. no solo funciona la envoltura.

gnganpath

Déjame mostrarte otra forma que funciona al 100%. También agregaré algo de relleno para el ejemplo.

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

Como puede ver, podemos lograr esto con algunas envolturas de control mientras utilizamos el atributo flex-grow y flex-direction.

1: Cuando el padre "flex-direction" es una "fila", su hijo "flex-grow" funciona horizontalmente. 2: Cuando el padre "flex-direction" es "columnas", su hijo "flex-grow" funciona verticalmente.

Espero que esto ayude

Daniel

GaddMaster
fuente

divexageración.

John

Puede eliminar uno de sus flex-pad-y:)

Eoin

Agradable..! Este es el único ejemplo que logró hacer que mi "contenido" <div> (entre mi encabezado y pie de página) ocupara toda la altura de la pantalla. Todos los demás ejemplos parecen ignorar el atributo "altura: 100%".

Mike Gledhill

Es una solución genial. Sé que John dice arriba de DIV overkill, pero no estoy de acuerdo. Necesita los cuatro divs para utilizar el crecimiento flexible tanto horizontal como verticalmente (¡Verticalmente ha sido el más importante!). ¡Me alegro de haber podido ayudar! Tener los cuatro DIV le da mucha flexibilidad. Una vez que comienzas a intentar eliminar los DIV, ¡esa flexibilidad comienza a debilitarse!

GaddMaster