How to add a footer in default MainLayout.razor?

user_1712913 0
Viewed 2678

What is the correct CSS to add a footer in the default Blazor layout? - I have tried some approach without success. I appreciate your help.

@inherits LayoutComponentBase

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <div class="main">
        <div class="top-row px-4">
            Anything
        </div>

        <div class="content px-4">
            @Body
        </div>
        <!-- ** How to make it stay fixed in the bottom? -->
        <footer>
            Anything, @(DateTime.Today.Year)
        </footer>
    </div>
</div>
blazor-client-side blazor css
2 Answers

app.css

...
html, body, #app {
    height: 100vh
    max-height: 100vh;
}
...

Add this to MainLayout.razor.css

...
.main > footer {
    height: 3rem;
    max-height: 3rem;
}
.main > .content {
    height: calc(100vh - 6.5rem);
    max-height: calc(100vh - 6.5rem);
    overflow-y: auto;
}
...


@media (min-width: 641px) {
...
    .sidebar {
        max-height: 100vh;
        overflow-y: auto;
...
    }

Note: The 6.5rem in calc(100vh - 6.5rem) is the sum of the default for top-row (3.5rem) + 3rem for the footer.

user_14924960

I made a really simple component for fixed bottom footers. The component allows for a dynamic height.

MainLayou.Razor

<div class="page">
.
.
.
    <FooterComponent></FooterComponent>
</div>

The components only job is to adjust the .page paddingBottom to be equivalent to the height of the FooterComponent. This ensures our page content is never hidden behind the footer.

FooterComponent.razor

@using Microsoft.JSInterop

  <footer class="footer" id="footer">
    .
    .
    .
  </footer>

@code {


    [Inject] IJSRuntime JS { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
         await JS.InvokeAsync<string>("FooterResized", DotNetObjectReference.Create(this));
    }

}

Supporting Javascript

function FooterResized(dotnethelper) {
    function padPageElement() {
        document.getElementsByClassName("page")[0].style.paddingBottom = footerElm.offsetHeight + "px";
    }
    var footerElm = document.getElementById("footer");
    new ResizeObserver(padPageElement).observe(footerElm);
}

Supporting CSS

.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: red;
}
user_5912850
Related