How to make a sticky footer using CSS?

问题

I want to keep my footer at the bottom of the page. I try this

position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;

but my footer getting messy. My website is made in WordPress. If possible I don\'t want to use any plugin for this. And I want to use a pure CSS only.

Here the CSS script

footer #bottom-footer{
background: none repeat scroll 0 0 #FFFFFF;
color: #000000;
border-top: 5px solid #F80000;
text-align: left;
padding: 9px;
font-size: 13px;
}
.footer-wrap a{
color:#000000;
}
.footer-wrap a:hover{
color:#F80000;
}
.footer-logo a {
margin-bottom: 6px;
display: block;
}
.footer-socials {
float: left;
line-height: 0px;
}
.footer-socials a {
border-radius: 100%;
color: #ffffff;
display: inline-block;
font-size: 14px;
height: 30px;
line-height: 30px;
margin-left: 3px;
text-align: center;
vertical-align: middle;
width: 30px;
}
.footer-socials a.facebook {
background: none repeat scroll 0 0 #1f69b3;
}
.footer-socials a.twitter {
background: none repeat scroll 0 0 #43b3e5;
}
.footer-socials a.gplus {
background: none repeat scroll 0 0 #d84734;
}
.footer-socials a.youtube {
background: none repeat scroll 0 0 #df2126;
}
.ak-contact-address .socials a.pinterest {
background: none repeat scroll 0 0 #ff3635;
}
.footer-socials a.linkedin {
background: none repeat scroll 0 0 #1a7696;
}
.footer-socials .socials a.flickr {
background: none repeat scroll 0 0 #e1e2dd;
}
.footer-socials .socials a.vimeo {
background: none repeat scroll 0 0 #7fdde8;
}
.footer-socials .socials a.instagram {
background: none repeat scroll 0 0 #c8c5b3;
}
.footer-socials .socials a.tumblr {
background: #395976;
}
.footer-socials .socials a.rss {
background: none repeat scroll 0 0 #fbc95d;
}
.footer-socials .socials a.github {
background: none repeat scroll 0 0 #383838;
}
.footer-socials .socials a.stumbleupon {
background: none repeat scroll 0 0 #e94c29;
}
.footer-socials .socials a.skype {
background: none repeat scroll 0 0 #09c6ff;
}
.footer-socials .social-icons span {
cursor: pointer;
display: inline-block;
}
.footer-socials .socials i {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.tagcloud a{
font-size: 13px !important;
background: rgba(0,0,0,0.4);
padding: 8px 10px;
margin: 0 2px 4px 0;
display: inline-block; 
line-height: 1;
}
.sidebar .tagcloud a{
background: #23A38F;
color: #FFF;
}

Website link

回答1:

Following a clean method implemented from an online source no longer available (dead link), the minimum code you should need for your page would be (note - probably best to use #bottom-footer instead of footer #bottom-footer for the selection of your footer - that could be part of the issue):

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px; /* bottom = footer height */
}
#bottom-footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}

回答2:

This works perfect. It's the example from W3SCHOOLS

https://www.w3schools.com/howto/howto_css_fixed_footer.asp

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: red;
   color: white;
   text-align: center;
}
</style>
</head>
<body>

<h2>Fixed/Sticky Footer Example</h2>
<p>The footer is placed at the bottom of the page.</p>

<div class="footer">
  <p>Footer</p>
</div>

</body>
</html>

回答3:

Bootstrap has a sticky footer you can use.

http://getbootstrap.com/examples/sticky-footer/

Or you can just do it with CSS and jQuery:

https://css-tricks.com/snippets/css/sticky-footer/

Hope that helps.

回答4:

A couple modern methods using a sprinkle of flex box CSS and the following HTML structure:

<body>
    <header></header>
    <main></main>
    <footer></footer>
</body>

Method 1: (fixed height footer) Apply display:flex and flex-direction:column to the body. Apply flex:1 (flex-grow:1) to the main element.

The main element will grow vertically to occupy any empty space, thus making the footer stick to the bottom.

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

header {
  background-color: #cffac7;
  height:50px;
}

main {
  background-color: #f8e2ff;
  flex:1;
}

footer {
  background-color: #fceec7;
  height:50px;
}

<header></header>
<main></main>
<footer></footer>

Method 2: (fixed height footer) Apply display:flex and flex-direction:column to the body. Apply margin-top:auto the footer.

You're done, because auto margins inside flex containers absorb all available free space, making the footer stick to the bottom. Note that this is not dependent on main having any height or content. In this case, we've given main no flex rules at all, and so it gets the default value of flex:initial (flex: 0 1 auto).

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

    header {
      background-color: #cffac7;
      height:50px;
    }

    main {
      background-color: #f8e2ff;
    }

    footer {
      background-color: #fceec7;
      height:50px;
      margin-top:auto;
    }

<header></header>
<main></main>
<footer></footer>

Method 3: (fluid height footer) This is really the same technique as in #1 but with elements that have no intrinsic height. By virtue of the ratio between the (unitless) flex-grow values given to the competing elements, main will grow at five times the rate as the header and footer.

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

header {
  background-color: #cffac7;
  flex:1;
}

main {
  background-color: #f8e2ff;
  flex:5;
}

footer {
  background-color: #fceec7;
  flex:1 
}

<header></header>
<main></main>
<footer></footer>

回答5:

I found the answer here

Modern Clean CSS “Sticky Footer”

html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* bottom = footer height */
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}

来源：https://stackoverflow.com/questions/29069498/how-to-make-a-sticky-footer-using-css

标签

css

sticky-footer