Search code examples
htmlcsssticky-footer

CSS issue - footer goes too long?


I'm having a bit of a problem with the footer on this site. I am looking for it to have a set minimum height and flow to the bottom of the page no matter the resolution. Kind of like a sticky footer but I want it to butt up against the end of the container div above it.

The issue is consistent across all modern browsers (Safari, Chrome, IE, and Firefox).

Too much CSS to post here but Firebug or a view source will show the corresponding styling. Any help would greatly appreciated.

http://034732e.netsolhost.com/gdlsk_joomla/


Solution

  • Thanks for the screenshot. Your description makes more sense now. I would do the following. Right now you have something like

    <body>
      <page>
         <header />
         <bodycontent />
      </page>
      <footer />
    <body>
    

    I would consider something like this

    <body height: 100%;>
        <page height: 100%; background: gray;>
          <header background: black; />
          <bodycontent background: black; />
          <footer />
        </page>
    <body>
    

    Basically what we do is set body and page to 100% which means they take up the entire screen. Page uses the same bg color as the footer. Finally we set header and bodycontent to have black backgrounds so that they cover up the Page's gray.