Stick Footer at the bottom of page [duplicate]

问题

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

回答1:

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

回答2:

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

回答3:

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>

来源：https://stackoverflow.com/questions/56575982/stick-footer-at-the-bottom-of-page

标签

html

css

flexbox