XHTMLboy Posted October 25, 2012 Share Posted October 25, 2012 Hello, I'm creating a website but cannot get the footer to stay at the bottom when I set a height. All I want it to do is to stay at the bottom. Help? Thanks The code is in the attached files. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 25, 2012 Share Posted October 25, 2012 google 'sticky footer' plenty of examples available. Link to comment Share on other sites More sharing options...
Charles @ CodeConquest.com Posted October 26, 2012 Share Posted October 26, 2012 (edited) In your CSS, change: footer {position:absolute;bottom:0;left:0;width: 100%;height: 3em;-webkit-box-shadow: 1px 0px 8px 0px #000;-moz-box-shadow: 1px 0px 8px 0px #000;box-shadow: 1px 0px 8px 0px #000;background-color: RGBA(1, 1, 1, 0.9);color: RGBA(1, 1, 1, 0.7);}p#copyright{position: inherit;bottom: 30%;left: 50px;color: #FFF;font-family: 'Open Sans', arial, serif;}#top{position:inherit;bottom: 30%;right: 30px;color: #FFF;font-family: 'Open Sans', arial, serif;text-decoration: none;} to... footer {position:fixed;bottom:0;left:0;width: 100%;height: 3em;-webkit-box-shadow: 1px 0px 8px 0px #000;-moz-box-shadow: 1px 0px 8px 0px #000;box-shadow: 1px 0px 8px 0px #000;background-color: RGBA(1, 1, 1, 0.9);color: RGBA(1, 1, 1, 0.7);}p#copyright{bottom: 30%;left: 50px;color: #FFF;font-family: 'Open Sans', arial, serif;}#top{bottom: 30%;right: 30px;color: #FFF;font-family: 'Open Sans', arial, serif;text-decoration: none;} Edited October 26, 2012 by Charles @ CodeConquest.com Link to comment Share on other sites More sharing options...
Ingolme Posted October 26, 2012 Share Posted October 26, 2012 The problem with fixed position is that the footer is at the bottom of the window, but not at the bottom of the page. The technique called "sticky footer" is there to make a footer at the bottom of the page. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now