100% CSS Layout

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

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

Computers & Internet Web Development Website Hosting

500 Internal Server Error after migrating from IIS 7.5 to IIS 10

by John Avis | November 4, 2019

As support ends for Microsoft Windows Server 2008 I have recently gone through migrating some websites to a new server running Windows Server 2016 and IIS 10 but some of the websites did not work.


Jquery/Javascript Web Development

tagInput: A simple jQuery plugin for tag entry using Bootstrap 4

by John Avis | October 15, 2019

For a website project I needed a way to enter multiple tags. I just wanted something simple that I could easily modify to suit my own needs, so I wrote my own.


ASP.NET Web Forms Web Development

ASP.NET bug with RadioButton GroupName in Repeater

by John Avis | September 1, 2019

I rediscovered a bug in ASP.NET that affects RadioButtons inside repeaters. Here is my solution to the problem.

Comments

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

Leave a Comment

Tags

About me

...random postings about web development and programming, Internet, computers, electronics and automotive topics.

Subscribe

Get the latest posts delivered to your inbox.