How to make my footer always stay at the bottom of the page, even when the page content is smaller than the screen?

前端未结

关注

 4  1085

I haven\'t added content to my page yet, since I\'m still working on the header and footer. I noticed that my footer, instead of being at the bottom of the page, like it would b

You can use flexbox auto margins

Minimal Example:

body {
  display: flex;
  flex-flow: column;
  min-height: 100vh; /* have the flex container at least take up the viewport */
  
  margin: 0;
  font-size: 20px;
}

footer {
  margin-top: auto;
  background: #999999;
}

<body>
  <header>Header</header>
  <div>Some random content</div>
  <footer>Footer</footer>
</body>

Using the same minimal example above but with long content:

body {
  display: flex;
  flex-flow: column;
  min-height: 100vh; /* have the flex container at least take up the viewport */
  
  margin: 0;
  font-size: 20px;
}

div {
  height: 3000px;
}

footer {
  margin-top: auto;
  background: #999999;
}

<body>
  <header>Header</header>
  <div>Some random content</div>
  <footer>Footer</footer>
</body>

Using the OP's code:

body {
  font-family: Lato;
  margin: 0px;
  padding: 0px;
  width: 100%;
  display: flex;
  flex-flow: column;
  min-height: 100vh;
}

header {
  height: 80px;
  padding-left: 20px;
  padding-right: 5px;
  padding-top: 15px;
}

header h1 {
  display: inline;
}

header nav {
  float: right;
  font-size: 18pt;
}

header nav a {
  color: #999;
  line-height: 50px;
  margin-right: 20px;
  text-decoration: none;
}

header nav a:hover {
  color: #666;
}

header nav a.currentPage {
  color: #7a7acc;
}

header nav a.currentPage:hover {
  color: #7a7acc;
}

footer {
  margin-top: auto;
  background-color: #f2f2f2;
  color: #666;
  font-size: 12pt;
  padding: 20px;
  text-align: center;
}

footer div {
  max-width: 750px;
  margin: 0px auto;
}

footer a {
  color: #666;
}

<!DOCTYPE html>
<html>

<body>
  <header>
    <h1>
      <img src="logo.png" />
    </h1>
    <nav>
      <a href="/" class="currentPage">Home</a>
      <a href="/services">Services</a>
      <a href="/news">News</a>
      <a href="/about">About</a>
      <a href="/contact">Contact</a>
    </nav>
  </header>
  <footer>
    <div>
      <p>Footer text. Footer text. Footer text.</p>
    </div>
  </footer>
</body>

</html>

0 讨论(0)

臣服心动

2021-01-23 05:50

this is because your content has nothing so footer will go up.

Here I have solution If your structure is like this

HTML

<header> header content goes here    </header>
<div class="container"> main content </div>
<footer> footer part </footer>

CSS

header { // header definitions  }
.container { 
       min-height: 500px;
       // other definitions  
}
footer { // footer definitions  }

This will stick your footer below 500px of content even if content is empty.

0 讨论(0)

遇见更好的自我

2021-01-23 05:51

Use css tables:

FIDDLE1 - little content

FIDDLE2 - little content + large footer

FIDDLE3 - lots of content

Markup

<header class="row">header content</header>
<div class="row">content here</div>
<footer class="row">footer content</footer>

CSS

html {
    height:100%;
    width:100%;
    }
body {
    height:100%;
    width:100%;
    display:table;
    table-layout:fixed;
    margin:0 auto;
    }
.row {
    display:table-row;
    background:orange
}
div.row {
    height:100%;
    background:pink
}

0 讨论(0)

小蘑菇

2021-01-23 06:05

I had the same problem a few weeks ago with the website I am working on and after a little bit of searching and trial and error work I managed to find the resolution to this problem.

I have here the code as it is a little bit hard to explain:

HTML:

<header>
    some header<br />
</header>
<section>
    <!-- no content -->

    <!-- little content -->
    <div id="little-content">some content</div>
    <!-- a lot of content -->
    <div id="lotsa-content">some more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more content</div>
</section>
<footer>
    &copy; some footer
</footer>

CSS:

html,
body {
    margin: 0;
    min-height: 100%;
    position: absolute;
    width: 100%;
}

header,
footer {
    background: red;
    color: white;
    position: absolute;
    text-align: center;
    width: 100%;
}

section {
    margin: 1.3em 0;
}

#little-content {
    display: none;
}

#lotsa-content {
    display: none;
}

footer {
    bottom: 0;
}

Here is a JSFiddle I made for you.

I hope this helps.

EDIT1:

To be more specific in answering your question: you have to make position the parent of the footer (that I guess it's the body) absolute and give it a min-height of 100% (also for its width), the same positioning for the footer (position: absolute;) and also to stick it to the bottom with bottom: 0; and the last thing is to give a bottom margin of the footers height so that it doesn't overlap (I also gave a top margin due the fact that I made the header absolute as well).

EDIT2:

Here is the JSFiddle example with the code you provided.

0 讨论(0)