100% CSS Layout

John Avis by | May 28, 2008 | HTML/CSS

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)

Related Posts


Full width HTML5 video without preserving the aspect ratio

by John Avis | August 10, 2016

I recently needed to show a video on a web page that needed to take the full width of the container (in this case, the full screen width) but keep a consistent height.


Excellent tutorial to make DHTML windows

by John Avis | March 6, 2011


Setting a Maximum Page Width Using CSS

by John Avis | February 16, 2008


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

Leave a Comment
ASP.NET Html Forms ASP.NET MVC ASP.NET Web Forms ASP.NET Web Pages Bootstrap C# Classic ASP Cool Websites Databases eBay and PayPal Electrical Repairs General Hardware HTML/CSS Jquery/Javascript Media Center Mobile Phones Responsive Web Design Reviews SEO and Social Networking Web Design Web Development Web Security web+db Website Hosting Windows XP Youtube

About me

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


Get the latest posts delivered to your inbox.