Stick Footer at the bottom of page

Question

I want to stick footer at the bottom of the page even when there is no content. When there is enough content, the footer should move to the end of the page.

I'm learning flexbox and tried doing so using flexbox. But it isn't working.

html {
  height: 100%;
}

body,
#root {
  display: flex;
  flex-direction: column;
}

.app {
  text-align: center;
}

.header,
.footer {
  background: #282c34;
  flex-shrink: 0;
  color: white;
}

.main {
  flex: 1 0 auto;
}

a {
  text-decoration: none;
  color: #42A5F5;
  padding: 20px 0;
}

<div class="root">
  <div class="app">
    <div class="header">
      <a href="#">Logo</a>
      <h1>Application Name</h1>
      <nav>
        <a href="#" class="navItem">Link1</a>
        <a href="#" class="navItem">Link2</a>
        <a href="#" class="navItem">Link3</a>
      </nav>
    </div>

    <div class="main">
      <p class="description">Small Description</p>
      <div class="search">
        <input type="text" />
        <p>Please Insert Search Query</p>
      </div>
      <div class="searchResult"></div>
    </div>

    <div class="footer">
      <div class="about">Some Random Company</div>
      <div class="footerLink">Contact</div>
      <div class="social">Twitter</div>
    </div>
  </div>
</div>

I want to know why it's not working and the mistake that I'm doing here. I know this question has been asked before. I just want to know, what's wrong with my code so that I can write better CSS after understanding it.

Also, here is the updated jsFiddle

@Roy This solution won't be suitable when there is enough content for the page. Also, how can I remove the horizontal scroll bar without setting `overflow-x: hidden;` ? — Rookie, Jun 13 '19 at 14:40

nimsrules · Accepted Answer · 2019-06-13T14:42:36.980

Instead to html or #root set .app as your flex container and a min-height of 100vh

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
}

.app {
  text-align: center;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header,
.footer {
  background: #282c34;
  flex-shrink: 0;
  color: white;
}

.main {
  flex: 1 0 auto;
}

a {
  text-decoration: none;
  color: #42A5F5;
  padding: 20px 0;
}

<div class="root">
  <div class="app">
    <div class="header">
      <a href="#">Logo</a>
      <h1>Application Name</h1>
      <nav>
        <a href="#" class="navItem">Link1</a>
        <a href="#" class="navItem">Link2</a>
        <a href="#" class="navItem">Link3</a>
      </nav>
    </div>

    <div class="main">
      <p class="description">Small Description</p>
      <div class="search">
        <input type="text" />
        <p>Please Insert Search Query</p>
      </div>
      <div class="searchResult"></div>
    </div>

    <div class="footer">
      <div class="about">Some Random Company</div>
      <div class="footerLink">Contact</div>
      <div class="social">Twitter</div>
    </div>
  </div>
</div>

Edit: Updated the code snippet to include a reset which removes the unnecessary scrollbar

Thanks, but why is scrollbar still there? How can I remove scrollbar without setting `min-height: 95vw` ? — Rookie, Jun 13 '19 at 14:29
Because you're setting the `min-height` of `.app` to `100vw` instead of `100vh` — nimsrules, Jun 13 '19 at 14:56

Praveen Murali · Answer 2 · 2019-06-13T08:20:08.997

Hope it will help.

html {
  height: 100%;
}

.app {
  display: flex;
  flex-direction: column;
  text-align: center;
  min-height:100vh;
}

.footer{
  margin-top:auto;
}

.header,
.footer {
  background: #282c34;
  flex-shrink: 0;
  color: white;
}

.main {
  flex: 1 0 auto;
}

a {
  text-decoration: none;
  color: #42A5F5;
  padding: 20px 0;
}

<div class="root">
  <div class="app">
    <div class="header">
      <a href="#">Logo</a>
      <h1>Application Name</h1>
      <nav>
        <a href="#" class="navItem">Link1</a>
        <a href="#" class="navItem">Link2</a>
        <a href="#" class="navItem">Link3</a>
      </nav>
    </div>

    <div class="main">
      <p class="description">Small Description</p>
      <div class="search">
        <input type="text" />
        <p>Please Insert Search Query</p>
      </div>
      <div class="searchResult"></div>
    </div>

    <div class="footer">
      <div class="about">Some Random Company</div>
      <div class="footerLink">Contact</div>
      <div class="social">Twitter</div>
    </div>
  </div>
</div>

These are the changes.

.app {
  display: flex;
  flex-direction: column;
  text-align: center;
  min-height:100vh;
}

Thanks, @Praveen. Why is scrollbar there even when there is not enough content? — Rookie, Jun 13 '19 at 14:27
it's because there is a CSS margin on the body tag since we havnt include any CSS resets. — Praveen Murali, Jun 14 '19 at 04:40

Esambe · Answer 3 · 2019-06-13T08:52:35.583

For the sake of visibility here, I gave .body-content class a min-height of 100vh. For mobile display media query, you could change the min-height to 100% such that there will be no unused bottom space in case of few contents. Hope this helps.

.container {
  background: #ccc
}

.body-content {
  min-height: 90vh;
  text-align: center;
  background: #fff;
  margin: 0;
  width: 400px;
  margin: 10px auto
}

.footer {
  background: #000;
  color: #fff;
  text-align: center;
  padding: 20px
}

<div class="container">
  <div class="body-content">

    <h1>Body content here</h1>

  </div>
  <div class="footer">
     <h4>This is footer</h4>
  </div>
</div>

Stick Footer at the bottom of page

3 Answers3

Linked