Forums

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

Home Forums CSS Viewport Height for Full Screen Div?

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #161079
    jor133d
    Participant

    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.

    `.section-full {
    height:100vh;
    min-height:100vh;

    }`

    Is there a way to do this that has a bit more compatibility? Will I need Javascript?

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

    Any help would be appreciated!!

    #161080
    Paulie_D
    Moderator

    Will I need Javascript?

    Probably.

    #161081
    jor133d
    Participant

    Should I start a new discussion in the javascript section or will people be able to provide some assistance here?

    #161095
    Alen
    Participant

    Something like this:

    http://codepen.io/anon/pen/wjpKn

    #161109
    paulob
    Participant

    I may be missing the point a little but you would just set html,body to height:100% and then you can set your div to height:100% .

    Or if there is no content in this div then use the pseudo element on the body to create the height (IE8+ + all others).

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html,body{height:100%;margin:0;padding:0}
    body:before{
        content:"";
        width:100%;
        height:100%;
        display:block;
        background:red; 
    }
    </style>
    </head>
    <body>
    <p>lorem ispsum</p>
    </body>
    </html>
    
    #235612
    behia
    Participant

    Helped me! thanks.

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