Min-Height 100% Problem

  • I know this question has been asked a million times… and I’ve combed through most of those threads with no luck so far.

    I am having trouble keeping the footer at the bottom of the page. I know I can do a min-height: 500px; for the content section and that pushes everything down just fine, but I want it to be consistent regardless of the viewer’s screen size… so I wanted to do min-height: 100%;

    The percentage doesn’t work though. Tried the “sticky footer css” routine also adding in the extra div/css and that darn near destroyed my design for some reason.

    Any other ideas of something simple that could achieve that? I’ve been banging my head on the desk for the past 2 hours. :/

    I am testing out the site at creatingthecottage[dot]com for now…

    Thanks for your help!

Viewing 4 replies - 1 through 4 (of 4 total)

  • Have you tried positon: relative; bottom: 0;

    (on the footer)

    Edit: this may have to be position: absolute to work.

    Oh and by the way, to get min-height: 100% to work, it needs to be applied to every parent container including the body and html tags.

    Thread Starter VirtualityStudio

    (@virtualityreiki)

    Oh thank you! I didn’t know the min-height has to be applied to EVERYTHING, oops!!!

    Thread Starter VirtualityStudio

    (@virtualityreiki)

    Tried both, but it still doesn’t work… I might just go back to the fixed pixel min height. Thanks though!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Min-Height 100% Problem’ is closed to new replies.