100% CSS Layout

By · May 28, 2008 · 0 comments

I had been looking for a CSS layout that has three components - a header, footer and content area - and the following characteristics:
  • When the content in the content area does not fill the available window space the footer should be set to the bottom of the page.
  • When the content overflows the footer should be positioned at the end of the document, off the screen.
  • The content area should fill at least all remaining window space so that any object I put inside it can scale to 100% of its height.
  • The content area should have a minimum height so that it won't look silly in a very tiny window (unlikely)
  • If the user resizes the browser the content area should resize.
I couldn't find a pure CSS solution so I came up with a solution that uses CSS and JavaScript.

View Sample (new window)


Get the latest posts delivered to your inbox.


There are no comments yet. Be the first to leave a comment!

Leave a Comment

All comments are moderated and rel="nofollow" is in use. Avatars are sourced from gravatar.com – a globally recognised avatar.

Type the numbers from the picture above

About me
John Avis ...mostly about web development and programming, with a little bit of anything else related to the Internet, computers and technology.

profile for John at Stack Overflow, Q&A for professional and enthusiast programmers

Get the latest posts delivered to your inbox. *