Una manera simple de lograrlo con *flexbox* es: * Tener todos los elementos que deseas maquetar dentro de una etiqueta padre o contenedor * Darle un display con un valor de flex a dicha etiqueta padre * Como originalmente todo se distribuye horizontalmente, entonces modificamos la orientación pasándolo a columna * Tus etiquetas que estén encima del footer tendrán el alto que su contenido les dé * Tu footer quedará como elemento final Código: <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-html --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Código</title> <style> * { margin: 0; } .container { display: flex; flex-direction: column; } .container-descripcion { border: 1px solid; } .container-final__pagina { border: 1px solid crimson; } </style> </head> <body> <main class="container"> <section class="container-descripcion"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem quas fuga, ratione rem ducimus fugit repellendus numquam dignissimos at dolorum. Asperiores itaque dolorem amet praesentium quam recusandae cum! Veritatis, enim. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem quas fuga, ratione rem ducimus fugit repellendus numquam dignissimos at dolorum. Asperiores itaque dolorem amet praesentium quam recusandae cum! Veritatis, enim. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem quas fuga, ratione rem ducimus fugit repellendus numquam dignissimos at dolorum. Asperiores itaque dolorem amet praesentium quam recusandae cum! Veritatis, enim. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem quas fuga, ratione rem ducimus fugit repellendus numquam dignissimos at dolorum. Asperiores itaque dolorem amet praesentium quam recusandae cum! Veritatis, enim. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem quas fuga, ratione rem ducimus fugit repellendus numquam dignissimos at dolorum. Asperiores itaque dolorem amet praesentium quam recusandae cum! Veritatis, enim. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem quas fuga, ratione rem ducimus fugit repellendus numquam dignissimos at dolorum. Asperiores itaque dolorem amet praesentium quam recusandae cum! Veritatis, enim. </section> <footer class="container-final__pagina"> aquí los datos del footer </footer> </main> </body> </html> <!-- end snippet --> **Ahora:** * Con el código actual el pie de página se verá hasta el final de la misma si el contenido es lo suficiente como para *empujarlo* al fondo * Sin embargo si por alguna razón el cuerpo de tu página no contiene suficiente texto el pie de página quedaría un poco arriba, lo que podemos hacer es que a la etiqueta padre o contenedora le demos un `height` de `100vh`