Components: Sticky footer when using the side nav

Created on 4 Jan 2017 · 5Comments · Source: angular/components

I am trying to add the material2 side nav to my home page that has a header, content and a sticky footer using flex, but I am having no luck. (example of sticky footer I'm using https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/)

Has anyone managed to do this and could point me in the right direction?

my current html

<div class="site">
 <md-sidenav-layout  class="site">
<header class="site-header">
  <md-sidenav #sidenav mode="over" class="app-sidenav" opened>
    <md-toolbar color="primary">
      <h2>Menu</h2>
    </md-toolbar>
    <md-nav-list>
      <a *ngFor="let navItem of navItems"
         md-list-item
         [routerLink]="[navItem.route]">
         <md-icon>{{navItem.icon}}</md-icon>
          {{navItem.name}}
      </a>
    </md-nav-list>
  </md-sidenav>

  <md-toolbar color="primary">
    <button md-icon-button (click)="sidenav.toggle()">
        <md-icon class="md-24" >menu</md-icon>
    </button>
  </md-toolbar>

</header>
  <div class="app-content site-content site-content--full">
    <router-outlet></router-outlet>
  </div>
  <footer class="site-footer">...</footer>

</md-sidenav-layout>

</div>

my css:

.site {
  display: flex;
  flex-direction: column;
  height: 100%; /* 1, 3 */
}

.site-header,
.site-footer {
  flex: none; /* 2 */
}

.site-content {
  flex: 1 0 auto; /* 2 */
  padding: var(--space) var(--space) 0;
  width: 100%;
}
.site-content::after {
  content: '\00a0'; /* &nbsp; */
  display: block;
  margin-top: var(--space);
  height: 0px;
  visibility: hidden;
}
@media (--break-lg) {
  .site-content {
    padding-top: var(--space-lg);
  }
  .site-content::after {
    margin-top: var(--space-lg);
  }
}

.site-content--full {
  padding: 0;
}
.site-content--full::after {
  content: none;
}
html,
body {
    height: 100%;
    margin: 0;
}

Source

davidcraddock

Most helpful comment

@Codebacca @EladBezalel this works. You have to make sure you dont have the wrapper around the "side nav" menu elements

HTML:

<md-sidenav-layout>
      <md-toolbar color="primary">
        <span>
          <button md-icon-button (click)="sidenav.toggle()">
            <md-icon>menu</md-icon>
          </button>      
        </span>        
        <span class="fill-space"></span>
        <button md-icon-button [md-menu-trigger-for]="menu">
          <md-icon>more_vert</md-icon>
        </button>
      </md-toolbar>
      <md-menu x-position="before" #menu="mdMenu">
      </md-menu>
      <md-sidenav mode="side" #sidenav>
      </md-sidenav>
    <div class="site">
      <main class="content">
          <router-outlet></router-outlet>
      </main>
      <footer class="footer">        
      </footer>
    </div>
  </md-sidenav-layout>

CSS:

md-sidenav-layout{
    min-height: 100vh;
}
.site{
    display: flex;
    flex-direction: column;
    min-height: 93.5vh;
}
.content{
    flex: 1;
}

josh-lester on 12 Jan 2017

👍3

All 5 comments

Please provide this code as a codepen so we can investigate further.

EladBezalel on 12 Jan 2017

@Codebacca @EladBezalel this works. You have to make sure you dont have the wrapper around the "side nav" menu elements

HTML:

<md-sidenav-layout>
      <md-toolbar color="primary">
        <span>
          <button md-icon-button (click)="sidenav.toggle()">
            <md-icon>menu</md-icon>
          </button>      
        </span>        
        <span class="fill-space"></span>
        <button md-icon-button [md-menu-trigger-for]="menu">
          <md-icon>more_vert</md-icon>
        </button>
      </md-toolbar>
      <md-menu x-position="before" #menu="mdMenu">
      </md-menu>
      <md-sidenav mode="side" #sidenav>
      </md-sidenav>
    <div class="site">
      <main class="content">
          <router-outlet></router-outlet>
      </main>
      <footer class="footer">        
      </footer>
    </div>
  </md-sidenav-layout>

CSS:

md-sidenav-layout{
    min-height: 100vh;
}
.site{
    display: flex;
    flex-direction: column;
    min-height: 93.5vh;
}
.content{
    flex: 1;
}

josh-lester on 12 Jan 2017

👍3

Please keep GitHub issues for bug reports / feature requests. Better avenues for troubleshooting / questions are stack overflow, gitter, mailing list, etc.

jelbourn on 27 Jan 2017

Since a Google Search brought me and the solution is outdated I'll leave a link here to updated markup (also the solution here lacks the support of full height for routed components).

https://blog.thecodecampus.de/material-2-sticky-footer-mat-sidenav/