CODEWITHSUNDEEP
htmlcssangularjs
Ervin E
Ervin E

Reputation: 452

Angular Materail: Force footer to bottom

based on what I have below, can someone help me on how to make my footer stay to the bottom of my browser window if my main content does not have enough content. I don't want a sticky footer. There's gotta be an angular material way of doing this but I can't find it.

Thanks!

<body layout="column" >
  <md-toolbar >
  </md-toolbar>

  <div layout="row" flex>
    <md-sidenav class="md-sidenav-left md-whiteframe-z2 " flex >
    </md-sidenav>

    <md-content flex layout="row" layout-align="center start">
      <div style="max-width: 1600px;" flex layout="column" layout-fill >
        <div >
          this is the main content
        </div>
        <div >
          this is the footer
        </div>
      </div>
    </md-content>
  </div>
</body>

here is jsfiddle

Upvotes: 2

Views: 834

Answers (1)

Alex
Alex

Reputation: 8695

I hope this can help you. I added some classes to your html and applied these rules.

.wrapper,
div[layout=row]
{
    height: 100%;
}

div[layout=column]
{
      display: flex;
  min-height: 100vh;
  flex-direction: column;
}
.content
{
     flex: 1;
}

Upvotes: 1

Related Questions