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

Post a Comment

Popular posts from this blog

Grouping with Data Entities

-
I am really loving the data entity in my new projects but have come across a couple of issues already. Tonight I learned about using a field that is not a part of your database and not in the entity but is a consolidation field from a group.  Once I found some good samples it worked incredibly well and I had a little summary grid on the page in just a couple of minutes.  So here is what I did  using (myEntityName context = new myEntityName())     { //First I declared a couple of variables because I was looking at data between specific dates          DateTime startdate = DateTime.Parse("2014-02-01");             DateTime enddate = DateTime.Parse("2014-02-01");          var dbRecords = (from c in context.myTableName                           where (c.MemberStartDate >= startdate && c.MemberStart...
Read more

Localizer in Controller

-
Localizer in Controller Using using Microsoft.Extensions. Localization; Includes private readonly IStringLocalizer< AppAccessController>  _localizer; Resource file must be in a Controller Folder in Resources Method example public Dictionary<string,string> GetRoleList(string appName, bool includeX) { //Code here return allItems.ToDictionary<string, string, string>(i => i, i =>  _localizer[i] ); }
Read more