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.

7 comments on “Content equal to browser height & centered”

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

Add your comment

Your email address will not be published. Required fields are marked *