Como mencioné en la imagen de arriba para hacer que el primer cuadro (grande superior) sea igual a 100vh - (altura del pie de página)

Y desea que la altura del pie de página responda a la mayor cantidad de contenido que tenga con una altura mínima de 50 píxeles

Intenté flex grow y no funcionó

De otra manera, quiero que la altura mínima del pie de página sea igual a 50 px y que aumente la altura si tiene mucho contenido, además de que la altura del cuadro grande superior es igual a 100vh - altura del pie de página

-1
Abdurrahman Adel 25 ago. 2020 a las 15:23

4 respuestas

La mejor respuesta

Estoy haciendo algunas suposiciones basadas en ningún código, pero esta solución garantizará que obtenga lo que está buscando:

html {
    height: 100%;
}
body {
    display: flex;
    flex-flow: column nowrap;
    min-height: 100%;
}
.top-box {
    flex: 1;
}
footer {
    min-height: 50px;
}

Suponiendo que tenga esta estructura:

<body>
    <div class=“top-box”>...</div>
    <footer>...</footer>
</body>
0
Dan Mullin 25 ago. 2020 a las 12:29

De esta forma, trabajar con flex-shrink, grow y base puede lograr algo así, probablemente tendrás que jugar con los valores.

.container {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-flow: column wrap;
}

.top{
  flex: 1 0 30%;
  background-color: red;
  width: 100%;
}
.footer{
  min-height: 50px;
  width: 100%;
  background-color: blue;
  /*just to add content easily for filling:*/
  display: flex;
  flex-direction: column;
}
<div class="container">
  <div class="top"></div>
  <div class="footer">
    <span>much content</span>
    <span>much content</span>
  </div>
</div>
0
Warden330 25 ago. 2020 a las 12:46

Aquí hay una solución colmada. Su sitio parecerá receptivo. El pie de página siempre llegará al final, independientemente del contenido de la clase .content. El pie de página tampoco pertenece a la ventana gráfica (clase .content). Aquí se utilizan Flex reglas.

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
}

.header {
  min-height: 100px;
  background-color: brown;
}

.content {
  height: 100%;
  background-color: yellow;
  flex: 1 0 auto;
}

.footer {
  min-height: 50px;
  background-color: green;
  flex: 0 0 auto;
}
<div class="main">
  <div class="header">
  </div>
  <div class="content">
  <p>If you are reading this, then have a nice day :)</p>
  <br>
  <p>If you are reading this, then have a nice day :)</p>
  <br>
  <p>If you are reading this, then have a nice day :)</p>
  <br>
  <p>If you are reading this, then have a nice day :)</p>
  <br>
  <p>If you are reading this, then have a nice day :)</p>
  <br>
  <p>If you are reading this, then have a nice day :)</p>
  <br>
  <p>If you are reading this, then have a nice day :)</p>
  <br>
  <p>If you are reading this, then have a nice day :)</p>
  <br>
  <p>If you are reading this, then have a nice day :)</p>
  <br>
  <p>If you are reading this, then have a nice day :)</p>
  <br>
  <p>If you are reading this, then have a nice day :)</p>
  </div>
  <div class="footer">
  </div>
</div>
0
sergey kuznetsov 25 ago. 2020 a las 12:54

Puedes hacerlo con un contenedor con altura asignada. Vea abajo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin:0;
    }
    
    .container {
        display: flex;
        flex-flow: column wrap;
        height: 100vh;
    }
    main {
        flex: 1;
    }
    footer {
        min-height: 50px;
    }   
</style>
<body>
    <div class="container">
        <main>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti ipsum provident voluptatem consequatur officia optio repudiandae quae enim sint labore sequi veniam modi, molestiae pariatur earum ex officiis, maiores possimus.
        </main>

        <footer>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore iusto nulla nostrum in cupiditate eaque sunt! Obcaecati, veritatis. Quaerat vero harum voluptates quisquam ipsam impedit delectus maxime earum quas in!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore iusto nulla nostrum in cupiditate eaque sunt! Obcaecati, veritatis. Quaerat vero harum voluptates quisquam ipsam impedit delectus maxime earum quas in!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore iusto nulla nostrum in cupiditate eaque sunt! Obcaecati, veritatis. Quaerat vero harum voluptates quisquam ipsam impedit delectus maxime earum quas in!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore iusto nulla nostrum in cupiditate eaque sunt! Obcaecati, veritatis. Quaerat vero harum voluptates quisquam ipsam impedit delectus maxime earum quas in!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore iusto nulla nostrum in cupiditate eaque sunt! Obcaecati, veritatis. Quaerat vero harum voluptates quisquam ipsam impedit delectus maxime earum quas in!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore iusto nulla nostrum in cupiditate eaque sunt! Obcaecati, veritatis. Quaerat vero harum voluptates quisquam ipsam impedit delectus maxime earum quas in!
        </footer>
    </div>
</body>
</html>
0
Kev Rob 25 ago. 2020 a las 12:38