CODEWITHSUNDEEP
cssmaterial-designmaterialize
xennygrimmato
xennygrimmato

Reputation: 2796

Materialize CSS - Sticky Footer

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;
  }

Upvotes: 28

Views: 30495

Answers (8)

omarmallat
omarmallat

Reputation: 734

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

Upvotes: 0

Samet Baskıcı
Samet Baskıcı

Reputation: 1170

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;
}

Upvotes: 10

Vadim Aidlin
Vadim Aidlin

Reputation: 326

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;
}

Upvotes: 5

DataDino
DataDino

Reputation: 1537

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;
}

Upvotes: 1

JP_
JP_

Reputation: 1666

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>

Upvotes: 11

James
James

Reputation: 21

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.

Upvotes: 0

Shakour Ghafarzoy
Shakour Ghafarzoy

Reputation: 73

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

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

  #main {
    flex: 1 0 auto;
  }

Upvotes: 3

Kenneth De Win
Kenneth De Win

Reputation: 706

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>

Upvotes: 59

Related Questions