- This topic is empty.
January 27, 2014 at 9:48 am #161226jmcParticipant
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.
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.January 27, 2014 at 10:00 am #161233Paulie_DModerator
You could always use developer tools to inspect the site and see how they do it.January 27, 2014 at 2:11 pm #161241jmcParticipant
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
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.
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.January 28, 2014 at 10:36 am #161285Eric GregoireParticipant
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.