Sticky Footer made simple

CSS Footers are simple but people tend to overthink them.  Here is how it works

You have two pieces

A container that all your other stuff is in
A footer that you want to always stay at the bottom of the page

In Blazor I put this container on my content pages and not my host page because I didn't want my left hand nav to be involved

<div class="container">

All my content

</div>
<footer>
Centered footer content
</footer>

And the CSS

.container {
    width:100%;
    padding: 0 15px;
}
footer {
    font-size: 12px; (you could also use a vw value here)
    padding-top:20px;
    background-color: #xxx;
    color: #fff;
    margin: auto;
    height: 60px;
    width: 100%;
    position: sticky; //absolute;
    bottom: 0;
    text-align: center;
}

Comments

Popular posts from this blog

Linq Exclude from separate list

Sorting Ascending and Descending

Linq Query Syntax vs Method Syntax