How can I place FluentFooter on bottom of the template

[MarvinKlein1508]

How can I move the FluentFooter below the the content?

Basically what I try to achieve:

1. Static top bar
2. Content
   2.1 Sidebar on left
   2.2 Content on right
   2.3 Footer below sidebar and content but not permanently visible on bottom

Or like the footer on https://www.microsoft.com

[dvoituron]

You could use the FluentLayout: https://www.fluentui-blazor.net/Layout
And in the FluentStack you can add the left and body content (like in the example), in addition of the right content (a new div)

Have you tried this?

[MarvinKlein1508]

@dvoituron thanks for your input. I forgot to metion that I try to do it based on the current FluentUI Template.

I've created a small sample repository which shows exactly want I want to achieve. Am I missing something in here?
https://github.com/MarvinKlein1508/FluentLayout

[dvoituron]

To remove the footer as a sticky footer, you need to remove the fixed body height in App.css.

.body-content {
    align-self: stretch;
    /* height: calc(100dvh - 86px) !important; */
    display: flex;
}

To apply a style to the left menu, you can customize the fluent-nav-menu CSS class.

[MarvinKlein1508]

Hi @dvoituron

getting rid of the height also removes the stickyness of the FluentHeader. Do you have any other suggestions?

[MarvinKlein1508]

@dvoituron I still haven't figured this one out. Is there no easy way to achieve this with latest 4.9.3 template?