Content equal to browser height & centered

15 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.

Tags: , ,

7 Responses to “Content equal to browser height & centered”

  1. Jon Sherrard says:

    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.

  2. Emma says:

    Thanks Jon, it’s a good idea and probably nicer to use your version and just use JS for IE8 and lower.

  3. Alan says:

    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')");

  4. Larry says:

    Why don’t you use vh;

  5. Alan says:

    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.

  6. 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/

Leave a Reply