Sticky Footer

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • AlyG
    New Member
    • Apr 2012
    • 3
    • 4.1.x

    [vB4] Sticky Footer

    Hi There

    Does anyone know how to modify vB4 to have a sticky footer?

    So no matter what the height of the browser window the footer appears at the bottom of the window. For pages where the page content is too tall you would need to scroll down anyway and the footer respects this height need. My challenge is to match up vBulletin 4.1.12 to an aMember 4.1.15 membership site that has a pre-coded sticky footer, so when you switch between the two sites (membership & bulletin board), the look & feel is seamless, the footer appearing constant across sites.

    Using CSS there's a fairly well known way to make a sticky footer happen, shown below and other similar variations of this method:
    (Credit to http://www.cssstickyfooter.com/html-code.html). Where the concept is to place the footer below the main content wrapper and size the html & wrapper divs to 100%. The footer CSS then takes care of the page positioning.

    HTML
    <div id="wrap">
    <div id="main">
    </div>
    </div>
    <div id="footer">
    </div>

    CSS

    html, body {height: 100%;}
    #wrap {min-height: 100%;}
    #main {overflow:auto;
    padding-bottom: 180px;} /* must be same height as the footer */
    #footer {position: relative;
    margin-top: -180px; /* negative value of footer height */
    height: 180px;
    clear:both;}

    vBulletin Mods Attempted (so far)
    So I tried doing this in vBulletin (my first customization of vBulletin, so I'm learning fast where & how to modify) using the .below_body div as a substitute footer so it could be beneath the .body_wrapper (as per the sticky footer technique) but for some reason a lot of white space appears (with no equivalent content) that pushes the .below_body version of the footer underneath the browser window. Plus on some screens the content overflows the footer. Obviously the CSS is causing this but I can't figure it out all last week using Firebug and other coding viewers.

    My vBulletin knowledge is beginner but I'm an experienced CSS & HTML coder.

    I'm not married to using this technique, the outcome is all that is important - having a sticky footer. So does anyone know from their customization experience a better way? Thanks for any help offered.

    additional.css (mods attempted)

    html, body {
    height: 100%;
    }
    .body_wrapper {
    min-height: 100%;
    }
    .below_body {
    background-image: url(images/footer-background-1px.png);
    background-repeat: repeat-x;
    height: 80px !important;
    }

    Aly
    Attached Files
  • AlyG
    New Member
    • Apr 2012
    • 3
    • 4.1.x

    #2
    Have found part of the answer for the element overflow.

    To remove the self created problem of overflowing elements, caused by removing the #footer entirely from the coding flow by #footer {display:none;}. The way around the elements overflowing is to keep the #footer div visible but with zero contents showing to the eye. The .below_body substitute footer is then kept in the correct place beneath all elements.

    #footer_select, #footer_links, #footer_time, #footer_copyright, #footer_morecopyright {
    display: none;
    }

    Note: Its important to keep the vBulletin copyright statements if you haven't paid the license fee for the right to remove them. Just recreate them in the .below_body substitute footer code.


    The second part of the problem, the extra white space

    I think is being caused by top & bottom margins on elements contained inside the .body_wrapper div, causing the 100% page height calculation to be incorrect (too large), so forcing the footer appear too far down the page.
    Last edited by AlyG; Thu 17 May '12, 6:43pm.

    Comment

    • AlyG
      New Member
      • Apr 2012
      • 3
      • 4.1.x

      #3
      CSS3 calc() function solves the extra white space problem!

      This hack will work for Internet Explorer 9, FireFox 4-12, and Chrome 19. Earlier browser versions don't support the new CSS3 calc() so the fallback behavior is vBulletin works as it normally would with the min-height: calc() on the .body_wrapper element being ignored. This gives you the sticky footer when possible and regular footer behavior when not. See http://caniuse.com/calc for the currently supported browsers.

      You need to add the CSS in three ways -moz-calc(), -webkit-calc(), calc()

      By trial and error I was able to figure out how much extra page height to remove using calc() so the CSS min-height:100% on the .body_wrapper is calculated correctly. It is unknown what the extra white space was caused by in the .body_wrapper element. For this customized site, it turned out to be a 22.25em reduction in height needed.

      You now have a sticky footer that stays flush to the bottom of the window regardless of browser window height (when the page content is too short). Move the window up and down and the footer stays flush.

      Here's the relevant code, I used to make it all work:

      html {
      height: 100%;
      }

      body {
      height: 100%;
      }

      .body_wrapper {
      min-height: -moz-calc(100% - 22.25em);
      min-height: -webkit-calc(100% - 22.25em);
      min-height: calc(100% - 22.25em);
      }

      #footer_select, #footer_links, #footer_time, #footer_copyright, #footer_morecopyright {
      display: none; /* This leaves the footer in the code flow but with no visible content */
      }

      .below_body {
      background-image: url(images/pfb/footer-background-1px.png) !important; /* Substitute footer graphic */
      background-repeat: repeat-x !important;
      height: 80px !important;
      }
      Last edited by AlyG; Fri 18 May '12, 2:20am.

      Comment

      Related Topics

      Collapse

      Working...