How can I get a sticky footer on my WordPress theme?

问题

I'm trying to get my footer to stick to the bottom of my page. I've followed loads of different tutorials (most of them very similar) on sticky footers, but none of them have worked for me. For some reason the footer sticks to the bottom of the SCREEN instead of the PAGE...

This is the layout of divs in my HTML:

<div id="wrapper">
<div id="header"></div>
<div id="main"></div>
<div id="footer"></div>
</div>

This is my CSS:

html, body {
height: 100%;

#wrapper {
min-height: 100%;
position: relative;
}

#content {
position: absolute;
padding-bottom: 300px; (same as footer height)
}

#footer {
width: 100%;
height: 300px;
position: absolute;
bottom: 0px;
}

回答1:

Try this

CSS

html, body {
    margin:0;
    padding:0;
    height:100%;
}
#wrapper{
    min-height:100%;
    position:relative;
}
#header {
   background:#00ff0f;
   padding:30px;
}
#main{
    padding:10px;
    padding-bottom:45px;   /* Height+padding(top and botton) of the footer */
    text-align:justify;
    height:100%; 
}
#footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:15px; /* Height of the footer */
    background:#00ff0f;
    padding:10px 0; /*paddingtop+bottom 20*/
}

HTML

<div id="wrapper">
    <div id="header">Header</div>
    <div id="main">
        Some Content Here... 
    </div>
    <div id="footer">Footer</div>
</div>

DEMO.

回答2:

I know this is old but these days you can use flex-box which allows for variable footer height

html, body, #wrapper{
  min-height: 100vh;
}
#wrapper{
  display: flex;
  flex-direction: column;
}
#main{
  flex-grow: 1;
}

来源：https://stackoverflow.com/questions/12361029/how-can-i-get-a-sticky-footer-on-my-wordpress-theme

标签

html

css

wordpress

footer