Grow your CSS skills. Land your dream job.

Problems with a sticky footer

  • # November 5, 2012 at 9:28 pm

    Having some issues with a div stretching to 100% height using a sticky footer. I’m trying to get the div “content-wrap” to stretch down to the footer but it’s not working. given that it’s parent or containing div is also set to 100% shouldn’t it stretch down to the sticky footer?

    [sample on jsfiddle](http://jsfiddle.net/QsWAk/ “view sample on jsFiddle”)

    # November 5, 2012 at 11:55 pm

    http://jsfiddle.net/QsWAk/1/

    .wrap is already the full height of the window. If you want the grey area to stretch down to the green footer you will need to calculate the space the grey box takes up of the screen (in percentages – not all screens are the same) this in addition to the height of the blue header.
    basically its:
    header + contentwrap + footer = 100%

    but all of this defeats the purpose of your stickfooter…..

    # November 6, 2012 at 9:59 am

    Yeah, I could put the background color on the .wrap div but I can’t figure out a way to get that to work with my design. May need to rethink the structure.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".