#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2006
    Posts
    3
    Rep Power
    0

    Viewport Height for Full Screen Div?


    I have a DIV element that needs to fill the entire screen until the user scrolls and reveals the content. So essentially remain at the viewports height.

    Here is what I did and it works, but it's only compatible with newer browsers.

    Code:
    .section-full {   height:100vh;   min-height:100vh;  }
    Is there a way to do this that has a bit more compatibility? How can I do this with javscript?

    I tried the absolute css method with height and width set to 100%, however, the content below then overlaps.

    Any help would be appreciated!!
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,044
    Rep Power
    119
    Do an online search for "jquery plugins for responsive web design". You should find several plugin ideas to adapt the new CSS3 "vh" unit of measurement. You also may want to take a look at Google's html5shiv.

    Good Luck

IMN logo majestic logo threadwatch logo seochat tools logo