Sticky footer in MainLayout

Question

This is for a Blazor (server) app, but I think this question is pure CSS.

I want my footer to be sticky to the bottom of the web page and to always display (i.e. not disappear if the browser is very short). Where/how do I place this footer? I'd prefer to have it in MainLayout.razor but I can put it in each page as a part of DxFormLayout & DxStackLayout if needed.

MainLayout.razor:

@inherits LayoutComponentBase

<PageTitle>Volunteer Central</PageTitle>

<div id="app">
    <div class="page">
        <NavMenu />

        <main>
            <article class="content px-4">
                @Body
            </article>
        </main>
        <hr />
    </div>
    <footer class="footer">
        <p>&copy; David Thielen 2023 - ALL RIGHTS RESERVED</p>
    </footer>
</div>

site.css:

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    height: 100%;
    margin: 0;
}

#app {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.main-content {
    flex: 1;
}

.footer {
    padding: 20px;
    text-align: center;
}

I've Googled, searched StackOverflow, & asked ChatGPT and all have delivered a bunch of suggestions that don't work. Everything puts the footer right after the rest of the page content.

Anyone know how to accomplish this?

Answer 1

I think position:fixed might be enough for you. Just make sure that for large pages, you leave a spacer at the end so the footer won't cover important content.

@page "/"

<div style="height:200%; background-color:lightskyblue">
    <h3>My Long Page</h3>
</div>

<div style="position:fixed; bottom:0; left:0; width:100%; background-color:pink">
    This is my footer
</div>

@code {

}