Conjunto Flexbox Min Altura Llenar restante en la pantalla de desplazamiento de contenedores

arhnee:

Soy moderadamente familiarizado con Flex-caja, pero este tema me ha desconcertado:

Estoy tratando de crear un diseño flexible caja que:

1. Pone un pie de página en la parte inferior de la pantalla si el contenido es más corta que la pantalla (vista-puerto)
2. Pone pie de página al final del desplazamiento del contenido de Si el contenido es más largo que la pantalla (vista-puerto)

Me parece que pueda conseguir uno o el otro, pero no ambos a la obra. Un par de objetivos:

• Lograr esto, si es posible, en el CSS solos
• La cabecera debe permanecer fijo en la parte superior de la pantalla, mientras que el contenido tiene desbordamiento desplazable
• La barra de encabezado variará en tamaño, por lo que la solución debe acomodar esta

Codesandbox demostración de Emisión

Gracias por cualquier ayuda

awais:

Establecer min-heighta 100vhde #wrapperigual

#wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

Y los Alpes Es necesario configurar marginde bodyque 0para evitar el desplazamiento

body{
 margin: 0;
}

Para cabecera pegajosa según el requisito OP Por favor, añadir tesis estilos junto con lo anterior que he mencionado (i Basta con retirar la altura a medida que dicha cabecera es de altura dinámica)

#header {
    background-color: darkgray;
    /* height: 64px; */
    position: sticky;
    top: 0;
}

Así los estilos finales que necesita para poner en el interior demo.cssson las siguientes

body {
  background-color: #444;
  margin: 0;}

#wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#header {
    background-color: darkgray;
    /* height: 64px; */
    position: sticky;
    top: 0;
}