WebTutoriales

Cómo mantener el pie de página al final de la misma en CSS

Aprende a mantener el pie de página en la parte inferior de la misma, incluso cuando hay poco contenido, utilizando CSS.

A veces, mientras diseñamos una página web, se puede dar el caso de que el elemento donde se encuentra nuestro contenido no llegue a la altura de la parte inferior de la página, lo que hace que el pie de página (también conocido como Footer) aparezca en el medio de la página en vez de al final. Como en la siguiente imagen:

Para solucionar este problema podemos utilizar CSS y asegurarnos de que el footer permanezca en la parte inferior de la página, incluso si no hay suficiente contenido que lo empuje hacia abajo. Una buena estrategia es utilizar la disposición de elementos CSS Flexbox. Aquí tienes un ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Título de la página</title>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .container {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        .content {
            flex: 1 0 auto;
        }
        .footer {
            background-color: #f4f4f4;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content">
            <!-- Aquí tu contenido -->
        </div>
        <div class="footer">
            <!-- Aquí el pie de página -->
            Contenido del pie de página
        </div>
    </div>
</body>
</html>

La clave está en la propiedad min-height: 100vh del div .container que asegura que el contenedor ocupe al menos la altura completa de la ventana gráfica (vh significa viewport height o altura de la ventana gráfica). La propiedad flex: 1 0 auto; en el div .content permite que crezca para llenar el espacio restante, empujando el pie de página hacia abajo.

Usando esta técnica, el pie de página siempre se pegará en la parte inferior de la página, independientemente de la cantidad de contenido presente.