Skip to main content
se añadieron 375 caracteres en el cuerpo
Origen Enlace
user128299
user128299

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

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
Origen Enlace
user128299
user128299

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>