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:
<!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>