Min-height=100% not working for main body text (3 posts)

  1. creigpsherburne
    Posted 6 years ago #

    The page in question is here - The CSS file is here. It's all dummy lipsum till it's right, then I'll move it to its own domain and import old posts. Which is why it looks that way.

    I've given the various sections colorful borders to make it make more sense. The main body is bordered in blue. I want it to take up all the available space, pushing the footer to to the very bottom of the page. In my styles.css file, I've told that section to be min-height=100%; it absolutely does not respond to that in any way. However, if I change it to: min-height=495px; (495 is an arbitrary example) it DOES behave right.

    (I don't WANT it to have a min-height of 495 or any other arbitrary number; I want it to be 100% so it looks right on any screen.)

    I've been beating my head against the wall on this one, and would really appreciate any help anybody can give. Thanks for reading.

  2. haydenhancock
    Posted 6 years ago #

    The best way to achieve this is by following this article:

  3. Russell Heimlich
    Posted 6 years ago #

    If your footer is absolutely positioned with bottom:0 then it will stick to the bottom of the page. The problem is if the main content is taller than your browser window, the footer will rest overtop of the content and not get pushed down like you would expect. Check out Ryan Fait's Sticky Footer CSS solution http://ryanfait.com/sticky-footer/

Topic Closed

This topic has been closed to new replies.

About this Topic