Members Area
Implementing a sticky footer with bizpress theme
Alex Member |
Leave a reply
|
11 years ago
Alex Member
The Problem:
I have been working on the site enterprise-capital-fund.com, and I have been trying to implement a sticky footer (that is, no matter short the content, the footer will always be at the bottom of the screen, as opposed to right below the end of content/sidebars). I have removed most of the sidebars by request, so when zoomed out far enough, the footer bar is in the middle of the screen. There's a pretty consistent sticky footer method to place it at the bottom. One site detailing it is here http://www.search-this.com/2009/10/09/css-a-sticky-subject/ I have been trying to implement it on an internal server, but I simply can't get it to work with the bizpress wordpress theme. CSS additions: html, body { height:100%;/* needed to base 100% height on something known*/ } outer { width:1349px; background:#ffffcc; margin:auto; min-height:100%; margin-top:-93px;/*footer height - this drags the outer 40px up through the top of the monitor */ } #footer { width:1349px; height:93px; margin:auto; clear:both; } HTML structure: head profile="http://gmpg.org/xfn/11"> <body class="home blog logged-in admin-bar content-l customize-support" layout="3" data-twttr-rendered="true"> <div id="outer"> <div id="scrollUp" style="opacity: 0;"> <!--<div id='all'>--> <div id="header"> <div id="content-top" class="container"/> <div id="content"> <div id="smthemes_share" style="position: absolute;"> <div id="content-bottom" class="container"/> </div> <!-- outer --> <div id="footer"> </div> </body> </html> I originally tried putting <div id="outer"> inside <div id='all'> and having the div tags in the appropriate locations, but that didn't work and this is closer to a the template sticky footer structure. Additional information: fully zoomed out, body and html are 6580 by 3010 outer is 6580 by 2068 so in theory the sticky footer is in the right place (right below the content), but something in the theme prevents the dividers inside the body from fully utilizing the full height And I've tried height=100% on outer. That last part has me completely stuck. If it's really something about the theme, there's nothing else I can do myself to make it work. I'd highly appreciate any insight or help anyone could offer. |