CODEWITHSUNDEEP
csssticky-footer
Nahydrin
Nahydrin

Reputation: 13517

CSS: Sticky footer not working

If you compare the following 2 pages:

Page 1: http://goldencraft.co/wp/

Page 2: http://goldencraft.co/wp/contact/

CSS: http://goldencraft.co/wp/wp-content/themes/minecraft/style.css

You'll see that when there is content, the footer isn't properly sticking. I have been trying to fix it for an hour, so I'm hoping someone can spot the problem inside the CSS, thanks.

Example of sticky footer

Upvotes: 0

Views: 226

Answers (3)

Matthew Blancarte
Matthew Blancarte

Reputation: 8301

The culprit appears to be the iframe right before the </body> tag. It has a visibility:hidden rule, which will allow it to displace elements on the page (in comparison to display:none).

You can either remove it, or add the following css:

iframe {
  display:none;
}

Upvotes: 1

fesh
fesh

Reputation: 216

Try this one

CSS

html,body{height:100%; width:100%; margin:0px; padding:0px;}
#wrapper{width:100%; height:100%; min-height:100%; height:auto; margin:0 auto; margin-bottom:-100px !important; background-color:#999999;}
#push{min-height:100px;}
#footer{min-height:100px; width:100%; overflow:hidden; background-color:#FF0000;}

HTML

<body>
    <div id="wrapper">
        <div id="push"></div><!-- do not remove -->
    </div>
    <div id="footer">Footer</div>
</body>

Upvotes: 0

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

Now just replace to yor #footer ID in your css file

#footer {
    background-color: #252525;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
}

Upvotes: 0

Related Questions