Min-Height 100% Problem (5 posts)

  1. VirtualityStudio
    Posted 4 years ago #

    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!

  2. cynnie88
    Posted 4 years ago #

    Have you tried positon: relative; bottom: 0;

    (on the footer)

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

  3. cynnie88
    Posted 4 years ago #

    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.

  4. VirtualityStudio
    Posted 4 years ago #

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

  5. VirtualityStudio
    Posted 4 years ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic


No tags yet.