Forums

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

Home Forums JavaScript Setting element to fill entire screen height

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #161226
    jmc
    Participant

    For my new project, I want a div to fill the entire height of the screen no matter the size. For the home page, I want to use this effect for a quick introduction/call to action to see the rest of the one-page site. Here is an example of what I am attempting to make.

    http://ournameismud.co.uk/

    I’ve done some digging, and all of the forum posts I’ve found across the web have not really targeted the kind of effect I’m looking for. If someone could at least steer me in the right direction of how to mimic this effect, I would greatly appreciate it!

    P.S. is this an effect you find personally appealing? I imagine this not being very friendly to older browsers, and if this is the kind of flashiness I can do without, I’ll rethink my design.

    #161233
    Paulie_D
    Moderator
    #161241
    jmc
    Participant

    I’m still on the hunt for a solution in Javascript that not only fills the height of the browser screen, but also keeps the declaration in the vertical center when the screen height adjusts (like in the site I provided as an example)

    However, for those of you looking for a similar answer to this question like myself, there is a pure CSS Solution I found at this site

    http://stanislav.it/how-to-make-div-element-100-height-of-browser-window-using-css-only/

    Compatible with all modern browsers (doesn’t work in ie8 or older), it will scale the element perfectly. I’m on the hunt for finding a technique that will keep my declaration vertically centered, but If I find anything, I will post here.

    That is of course, someone finds a nice javascript fallback for both requests…

    #161278
    TheDoc
    Moderator

    With just CSS it’s as simple as this: http://codepen.io/ggilmore/pen/64936104033542fb15b451df3028932b

    I’m not sure what the browser support is on that, though, didn’t do any testing other than in Chrome.

    #161285
    Eric Gregoire
    Participant

    I like to use 100% height on the html and body tags to allow for percentage heights of the children elements. Thanks for sharing the article on vh, though; I’ve never heard of it until now.

    Another (using JS) little trick for centering things vertically can be seen here: http://codepen.io/Boogiesox/pen/fjHvE In a nutshell, I get the negative value of the height of the element I want to center vertically, divide by two, and apply that as a negative top margin. Because browsers reference the 50% relative from the top of the parent by using the top of the element it’s pushing down 50%, this negative margin is effectively finding the vertical center (half height) of the element and that’s where it’ll reference the top: 50% from. So you can just call the “vertical-align” class to it and run the script whenever you need to.

    Using this, it’s best to only use padding values for setting spacing for anything within the vertical-align element as margins may throw off proper centering.

    Note: document.querySelector() is fairly new; browser support will vary.

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