Content equal to browser height & centered
Tweet15 October 2014: updated to include feedback from comments.
A current design pattern on some scroll-hijacking sites is to have each section as tall as the browser window so you see that content without distraction before moving onto the next.
This is a demo of content equal to browser height using CSS with a fall-back coffeescript solution for browsers that don’t understand css transforms. It is also responds to any adjustment in height and width of the browser window.
See the Pen Make each section as tall as the browser window by Emma Patricios (@emmasax) on CodePen.
For anyone interested in how you’d do this without JavaScript, I’ve forked the Codepen demo here: http://codepen.io/jonsherrard/pen/Btlij
Of course this limits you to IE9+, but given the rise of mobile and tablet, you should be dropping unnecessary JS as fast as you can.
Thanks Jon, it’s a good idea and probably nicer to use your version and just use JS for IE8 and lower.
Here is another way of doing it without javascript and without any absolute positioning. This is IE8+ so more backwards compatible too.
CSS Deck demo here: http://cssdeck.com/labs/full/qzvq763h
If you want it working in IE7 you can either include an extra span or use an expression to add a before element
*zoom: e("expression(this.runtimeStyle.zoom='1',this.insertBefore( document.createElement('small'),this.childNodes[0] ).className='before')");
Added this too CodePen too http://codepen.io/ParsonsProjects/pen/aLgnE
Why don’t you use vh;
I have heard of vh and vw put have not used it much this is mainly because of the browser support http://caniuse.com/#feat=viewport-units
Would this vertically align the text?
Larry if you could provide an example that would be great.
Good effort, but such a layout technique shouldn’t require JS. There are so many different ways: http://www.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/