The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS 3 100% height div’s and a stick footer.

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #35735

    been racking my brain on this since before the weekend. bonus via paypal to anyone who can solve without using js.

    paypal bonus whoever can solve.


    There’s a difference between a sticky footer and a footer that stays at the bottom of the screen (or header at the top).
    A stick footer basically stays at the bottom, even if there’s no content to push it down, but if there is, it goes down with it.
    To do a sticky footer, you need to have a page-wrap a footer and two empty divs:

    * { margin: 0; padding 0; }
    html, body { height: 100% }
    #page-wrap { height: auto !important; min-height: 100%; height 100%; margin: -120px[the height of your footer, can be any number]; }
    .clear { clear: both; }
    #push, footer { height: 120px; }

    A footer as a frame will always be on the bottom, however much text you have, it’s stay and not scroll, while the text will. For a footer like this:

    #footer { position: fixed; bottom: 0; }
Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.