HDRebel88 Posted October 9, 2014 Share Posted October 9, 2014 I am trying to implement a sticky footer on my site, but I cannot get it to work. I've done it on about 5 sites prior to this, but this one is just not working. The footer sticks to the bottom of the window, not the bottom of the document. I need it to be the bottom of the document. This is the current state of the page: http://www.aspyrhosting.com/index.php HTML: <!DOCTYPE html> <html lang="en-US"> <head> <title></title> <meta charset="utf-8" /> <meta content="index, follow" name="robots" /> <meta content="0.0.1" name="revision" /> <link href="http://cdn2.aspyr.us/imgs/aspyrhosting/favicon.ico?v=0.0.1" rel="shortcut icon" /> <link href="http://cdn2.aspyr.us/css/aspyrhosting/style.css?v=0.0.1" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <header role="banner"> <section id="wrapper"> <div id="logoWrapper"> <img id="logo" src="./transparent.png?v=0.0.1" /> </div> <div id="headerRight"></div> </section> <section id="menuWrapper"> <div id="menuInnerWrapper"> <div id="menu"> </div> </div> <div id="searchbox"> Search: <input type="text" /> </div> </section> </header> <main id="content" role="main"> <p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p> </main> <footer> <section id="left"> <div id="copyright" role="copyright"></div> </section> <section id="right"> </section> </footer> </div> </body> </html> CSS: article, aside, figure, footer, header, hgroup, main, menu, nav, section{display: block;} html,body { margin:0; padding:0; height:100%; } #container { height:100%; min-height:100%; min-width: 1115px; position:relative; } header { } #logo { background: url('http://cdn2.aspyr.us/imgs/aspyrhosting/logo.png'); } main { padding-bottom: 100px; /* Height of the footer */ } footer { position:absolute; bottom:0; width:100%; height: 100px; /* Height of the footer */ background:#39f; } #menuWrapper { background: #080000; clear: both; width: 100%; height: 40px; } #menuInnerWrapper { float: left; width: 850px; } #menu { margin: 0 auto; width: 710px; } ul{ padding: 0 3px; margin: 0 auto; list-style-type: none; display: block; float: left; } ul li{ display: inline-block; padding: 0 5px; margin: 0 auto; text-align: center; height: 40px; width: 90px; line-height: 40px; } ul li a { text-decoration: none; color: #fff; } #searchbox { float: right; line-height: 40px; padding-right: 10px; min-width: 200px; width: 10%; } Quote Link to comment https://forums.phpfreaks.com/topic/291536-sticky-footer-help/ Share on other sites More sharing options...
Solution Frank_b Posted October 9, 2014 Solution Share Posted October 9, 2014 http://ryanfait.com/sticky-footer/ Quote Link to comment https://forums.phpfreaks.com/topic/291536-sticky-footer-help/#findComment-1493168 Share on other sites More sharing options...
HDRebel88 Posted October 10, 2014 Author Share Posted October 10, 2014 Yep... essentially already using that method. Got it from here: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page Essentially identical... not working. Quote Link to comment https://forums.phpfreaks.com/topic/291536-sticky-footer-help/#findComment-1493208 Share on other sites More sharing options...
adam_bray Posted October 11, 2014 Share Posted October 11, 2014 You want a fixed footer but you're using position: absolute; .. that's your issue. Quote Link to comment https://forums.phpfreaks.com/topic/291536-sticky-footer-help/#findComment-1493315 Share on other sites More sharing options...
HDRebel88 Posted October 11, 2014 Author Share Posted October 11, 2014 You want a fixed footer but you're using position: absolute; .. that's your issue. No I don't. A fixed footer would stay at the bottom of the window regardless of where you scroll on the page. (For example, Facebook and Twitter's headers are fixed elements. Not what I want for my footer.) I want a footer that is at the bottom of the document, only visible when you scroll to it, unless the document is shorter than the window height, then the footer should be stuck to the bottom of the window. Quote Link to comment https://forums.phpfreaks.com/topic/291536-sticky-footer-help/#findComment-1493352 Share on other sites More sharing options...
Frank_b Posted October 12, 2014 Share Posted October 12, 2014 Yep... essentially already using that method. Got it from here: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page Essentially identical... not working. Here it is absolutely working so i tried it with your html. i have found out that when you use the <footer></footer> section marker that it won't work but as soon you replace that for <div id="footer"></div> then it will work just fine. Quote Link to comment https://forums.phpfreaks.com/topic/291536-sticky-footer-help/#findComment-1493360 Share on other sites More sharing options...
HDRebel88 Posted October 12, 2014 Author Share Posted October 12, 2014 So that would infer that the default CSS on the footer element is different than the div element. Thought they were suppoed to be nearly identical. Quote Link to comment https://forums.phpfreaks.com/topic/291536-sticky-footer-help/#findComment-1493400 Share on other sites More sharing options...
Frank_b Posted October 12, 2014 Share Posted October 12, 2014 (edited) nearly yes... did you have success now? Edited October 12, 2014 by Frank_b Quote Link to comment https://forums.phpfreaks.com/topic/291536-sticky-footer-help/#findComment-1493419 Share on other sites More sharing options...
HDRebel88 Posted October 13, 2014 Author Share Posted October 13, 2014 I haven't had time to work on it recently. I'm in college, so I'm in the middle of a mid-term paper. I should be able to work on figuring out the css by tomorrow. Quote Link to comment https://forums.phpfreaks.com/topic/291536-sticky-footer-help/#findComment-1493440 Share on other sites More sharing options...
HDRebel88 Posted October 13, 2014 Author Share Posted October 13, 2014 (edited) Actually, just had a quick go at it. Used the Ryan Fait method, and it works perfect. At least on my end in FireFox, haven't tested other browsers. Edited October 13, 2014 by HDRebel88 Quote Link to comment https://forums.phpfreaks.com/topic/291536-sticky-footer-help/#findComment-1493453 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.