Forums

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

Home Forums CSS 100% height?

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #34899
    mshort1985
    Member

    Hi everyone, has anyone figured out how to get a div to be 100% of the current window height?
    I read that it relies on the parent element having a height value but that doesn’t seem to work for me either.
    if anyone has figured out a way around this i’d be grateful.

    #89605
    Johnnyb
    Member

    @tannercampbell, overflow: hidden makes the parent element expand around floated elements, but doesn’t necessarily make it’s height 100% of the window.


    @mshort1985
    , here’s an example: http://jsfiddle.net/zyN58/

    #89629
    Jeager
    Member

    Not to highjack, but I was about to post the same thing. I just tried having the html and body and the container 100% height. It made my page wrap only go down so far and stop.

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

    The end goal is to have my bar “content_home” be 100% of the window height, so when the large logo re sizes, so does the side bar.

    #89631
    Johnnyb
    Member

    @Jeager, the float on ‘content_home’ is causing it’s height to contract. If you take the float off it will expand to the full window height. It appears that you need the float though so I would just use JS to adjust the height of that div.

    I’d add jQuery and use something like:

    $(‘.content_home’).css(‘height’, $(window).height());

    #89632
    TechStudio
    Member

    Here’s a cross-browser sticky footer that accomplishes a 100% height body without JS.

    http://ryanfait.com/sticky-footer/

    #89685
    Jeager
    Member

    Hmm.. Before I had any floats I had the logo outside of the wrapper, and gave the ‘content_home’ a margin of 50%, but the problem is that after the logo hits its max width, the ‘content_home’ just starts floating off in space… If there is a way around that, I can avoid using js, however I am also not really opposed of it either.

    #89702
    Jeager
    Member

    Unfortunately that code does not work, or I am doing something wrong, which is probably the case considering I cant get smooth scrolling working correctly either. The sticky footer is kinda weird, because if I dont position it normally it gets shoved somewhere awkward. However adding it did not break it, so I’ll be using it.

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.