Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › JavaScript › 100% height not working

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • October 26, 2011 at 10:56 pm #34924
    Jeager
    Member
    $(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:53 am #89884
    Jeager
    Member

    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 #89886
    Scatter_good
    Member

    It isn’t appearing as 100%height for me

    October 30, 2011 at 3:38 pm #89939
    Jeager
    Member

    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 #89955
    Mottie
    Member

    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 #89989
    Sam_Purcell
    Member

    I almost always follow the rule:

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

    January 4, 2013 at 11:26 am #119815
    prabhavkhandelwal
    Participant

    Thanks Sam!

    That worked perfectly for me!

    January 4, 2013 at 10:09 pm #119871
    EkingRDL
    Member

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

    April 25, 2014 at 1:15 pm #168710
    Antonio Gruye
    Participant

    I tried with…

    height: 110% ;
    /* More / Less is up to you*/

    It’s not the “right” way maybe, but it works fine.

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.