cssflexbox

Bootstrap / CSS footer not staying at bottom

I am facing an issue with my website layout where the footer does not stay at the bottom of the screen on pages with little content. It stays halfway up the page instead. However, when there’s enough content to scroll, the footer behaves correctly. I’m using Bootstrap and Flexbox to handle the layout, but the footer doesn’t always stick to the bottom when there is minimal content.

This is from layout.html:

<body class="bg-light text-dark text-center d-flex flex-column" style="min-height: 100vh;">
    <nav class="navbar navbar-expand-lg navbar-light bg-light mb-3">
        <div class="container-fluid">
            <!-- Navbar content -->
        </div>
    </nav>

    <div class="container-fluid flex-grow-1">
        {% block content %}
        {% endblock %}
    </div>

    <footer class="container-fluid py-2 mt-3">
        <div class="row">
            <div class="col-12 col-md-4 text-start">Gavin Reid &copy; 2025</div>
            <div class="col-12 col-md-8 text-end">
                <a href="{{ url_for('main.cookie_policy') }}">Cookie Policy</a> |
                <a href="{{ url_for('main.terms_and_conditions') }}">Terms and Conditions</a> |
                <a href="{{ url_for('main.privacy_policy') }}">Privacy Policy</a>
            </div>
        </div>
    </footer>
</body>

and my css:

html, body {
    height: 100%;  /* Ensure full screen height */
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

body {
    min-height: 100vh;  /* Ensure the body takes full height */
    display: flex;
    flex-direction: column;
}

.container-fluid {
    flex: 1;  /* Makes the content fill the remaining space */
    padding-top: 1.5rem;  /* Space between navbar and content */
}

footer {
    margin-top: auto;  /* Ensure footer stays at the bottom */
    padding: 10px;
    background-color: #f7f7f7;
    text-align: center;
    color: #666;
}

On pages with minimal content, the footer is not staying at the bottom of the screen. Instead, it appears halfway up. I am using Flexbox for layout, but the footer doesn't seem to push to the bottom when content is small. How can I fix this issue so that the footer stays at the bottom of the screen even when there's little content?

Thanks in advance.

Solution

  • Even though, your body is a flex-container and .container-fluid is a flex item allowing margins to grow, you have flex: 1 set on your .container-fluid class allowing your footer to grow depending on the "content" available above the container.

    Set flex-grow: 0 to prevent container growth and it should solve your problem.