Grow your CSS skills. Land your dream job.

100% height not working

  • # October 26, 2011 at 10:56 pm
    $(document).ready(function () {
    $("#content").height($(document).height());
    });

    Using that bit of code to try to achieve my 100% height to my #content. However, its not working… Any ideas?

    http://people.ysu.edu/~jtpenezich/tfts/

    I solved my other javascript problems (don’t know how) but the smooth scroll is working correctly now, and I made it so my #page is always the length of the logo. However i’d like to try and get my #content to always fill up the screen.

    # October 29, 2011 at 4:41 am
    $(window).height();
    # October 29, 2011 at 4:53 am

    I just got it working using the original code. Weird thing was, I didn’t change anything. For whatever reason either my computer or chrome was just going super slow, and now its working fine.

    # October 29, 2011 at 5:48 am

    It isn’t appearing as 100%height for me

    # October 30, 2011 at 3:38 pm

    Yeah, I’m not sure whats going on. I think what is happening though is it renders as high as the browser is when you go to the site, but doesn’t expand past that

    # October 31, 2011 at 2:52 am

    The document height is not the same as window height. document, html and body all have the same height, or usually do.

    So, if you only have a few lines in your document, then the document height will be less than the window height, which is equal to the browser window height.

    If you have a bunch of stuff in your document, like say this page, then the document/html/body height will be greater than the window height.

    # October 31, 2011 at 11:13 pm

    I almost always follow the rule:

    html { height: 100%; }
    body {height: 100%; }
    #content {min-height: 100%; }

    # January 4, 2013 at 11:26 am

    Thanks Sam!

    That worked perfectly for me!

    # January 4, 2013 at 10:09 pm

    @Sam_Purcell, you should use min-height: 100%; not height.

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

You must be logged in to reply to this topic.

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