28

I followed the steps mentioned here - http://materializecss.com/footer.html - to create a Sticky Footer, but the results are not as expected.

I copy pasted the following code to the materialize.min.css file:

  body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
  }

  main {
    flex: 1 0 auto;
  }
2
  • but the results are not as expected. Can you be more specific and give us a demo (a Fiddle perhaps)?
    – A.J. Uppal
    Apr 17, 2015 at 15:34
  • Why are you copying uninified css into a minified file?
    – ajmajmajma
    Apr 17, 2015 at 15:47

8 Answers 8

59

You're probably not using the <main> tag

Note: We use flexbox to structure our html so that the footer is always on the bottom of the page. It is important to keep the structure of your page within the 3 HTML5 tags: <header>, <main>, <footer>

5
  • Thanks Kenneth De Win this fixed my issue
    – zot24
    May 4, 2015 at 14:05
  • This fixed my issue. Jan 28, 2016 at 3:59
  • 2
    How should i use <main> i wrapped all my content with the footer inside and it didn't work, keeping the footer outside of main also didn't work //=
    – kroe
    Apr 29, 2016 at 23:18
  • 2
    I'm having the same issue, using Materialize with React. My structure is using the header, main, footer components (even though they are inside a div that is my React "app" container). But all the content is contained within that main div (i.e. header, main and footer are children of it). And yet, the footer still doesn't want to stick to the bottom.
    – batjko
    Jun 15, 2016 at 8:55
  • 1
    My issue was that I had a container div around the main component. Switched them around and that worked. Feb 12, 2018 at 11:18
11

If you look at the source of the example page you can see how they are doing it: http://materializecss.com/footer.html

Structure your HTML like the example below:

<body>
    <header></header>
    <main></main>
    <footer></footer>
</body>
10

If you use this footer under Angular component, probably your <header> <main> <footer> tags wrapped by <app-root> tag. In this case You should specify your css like below :

app-root {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}
main {
    flex: 1 0 auto;
}
1
  • Same for React (and I imagine other frameworks as well). Thank you!
    – AdelaN
    Apr 16, 2020 at 9:40
5

Materialize CSS requires structure:

<body>
    <header></header>
    <main></main>
    <footer></footer>
</body>

to be preserved. Here's how you can implement it with react:

index.html

<body id="root"></body>

index.js

ReactDOM.render(<App/>, document.getElementById('root'))

App.js

render() {
return (
  [
    <header>
      ...
    </header>,
    <main>
      ...
    </main>,
    <footer>
      ...
    </footer>
  ]
);

Note that we are returning an array to render multiple items on the same level.

index.css

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}
3

just add the (#) before the (main).

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
  }

  #main {
    flex: 1 0 auto;
  }
1
  • This would only make sense if you are not using a main tag, but instead a div with a .main class, which is not what they are recommending.
    – batjko
    Jun 15, 2016 at 8:56
1

For those using Ember.js (v2.14): You'll have to modify the instructions a bit.

If your app/template/application.hbs looks like this:

<header>
</header>

<main>
{{outlet}}
</main>

<footer>
</footer>

Then your app/styles/app.js should look like this:

.ember-view {
  display: flex;
  flex-direction: column;
}

main {
  min-height: 100vh;
  flex: 1 0 auto;
}
1
  • This fixed my issue. Thank you so much!
    – Cameron
    Oct 5, 2017 at 3:40
0

Put a background-color on both body and main selectors in the css and have a look at both elements. If one of them hasn't changed color it could be an issue in the css that came before it - ie. check the styles above it.

0

Not sure why, but when I created an asp.net application in visual studio, and implemented materialize, with sticky footer, I recognized that main tag didn't occupy the blank space for some reason! even I followed exactly the documentation.

To find out why, I build similar html page using notepad++ and I started copying to it the required element only from visual studio page (without extra scripts and NuGet packages, and it works great. main tag simply occupied the blank space and footer is sticking down.

Then, I opened both pages in chrome (the one from visual studio, and the simple one from notepad++), and I started comparing both css for each element in developer tools. They were identical!!!! however, main is limited to content in visual studio, but occupying blank space in notepad++!!!.

the solution for me was to add in css

main {
    min-height: calc(100vh - 90px); 
}

keeping in mind that my footer was having a height of 90px.

I hope someone can identify the main reason, instead of fixing an unknown

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.