Setting element to fill entire screen height

[jmc]

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.

[Paulie_D]

You could always use developer tools to inspect the site and see how they do it.

https://www.google.co.uk/search?q=one+page+scrolling+website&oq=one+page+scroll&aqs=chrome.1.69i57j0l5.4625j0j1&sourceid=chrome&espv=210&es_sm=122&ie=UTF-8

[jmc]

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…

[TheDoc]

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.

[Eric Gregoire]

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.

[Author]

Posts