简体   繁体   中英

Keeping the footer on the bottom of the page?

I know this is a common issue but I just can't work this out. No matter how many combinations of settings I try, the footer won't stay on the bottom of the page. It will just sit under whatever else is above it.

body {
  margin: 0;
  background-color: #ACFAB7;
}

# container {
  margin: 0 auto;
  padding: 40px;
}

#header {
  z-index: 0;
  height: 78px;
  background-color: #2ecc71;
}

#footer {
  z-index: 2;
  height: 40px;
  width: 100%;
  padding: 0px;
  position: relative;
  background-color: #2ecc71;
  /*display required to center text*/
  display: table;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

#image {
  z-index: 1;
  margin: 20px auto;
  padding: 50px;
}

/*Centers text within the header*/
span {
  display: table-cell;
  vertical-align: middle;
}

You have a lot of problems. This solution is for:

  • Fixing your footer at the end of the page.
  • Centering the contents (both vertically and horizontally).

Fixes

  • Get rid of display: table .
  • Get rid of width: 100% .
  • Change relative to fixed .

 #footer { z-index: 2; line-height: 40px; padding: 0px; position: fixed; background-color: #2ecc71; text-align: center; left: 0; right: 0; bottom: 0; } 
 <div id="footer">Copyrights.</div> 

You can use position: fixed; bottom: 0 position: fixed; bottom: 0 ;

 #footer { z-index: 2; height: 40px; width: 100%; padding: 0px; background-color: #2ecc71; text-align: center; margin-left: auto; margin-right: auto; position:fixed; bottom:0; left: 0; } 
 <div> <footer id="footer">Footer</footer> </div> 

position: fixed; and bottom: 0; should do the trick. Add width and height as neccessary.

 .footer { position: fixed; bottom: 0; width: 100%; height: 30px; background-color: aquamarine; } 
 <div style="background-color: lightgrey;height: 800px"> Page content </div> <div class="footer"> this is the footer </div> 

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM