Recently at work, I’ve been building a web site that’s supposed to work without scroll bars, with everything being displayed on a single full screen. While this is severely limiting for a web site, there obviously are scenarios where one would need such a layout, since I’m using one right now.
What I did was to use the typical fixed header and footer layout and expand it by making the middle section fixed size as well. Here’s how…
How to Create a Fixed Header and Footer in CSS
For this, we will be using fixed and absolute positioning in CSS. First of all, let’s look at our basic html structure:
This gives us the basic building blocks for everything we’ll need. Our full screen layout will contain a header and a footer with fixed heights, while the middle section will be as tall as it needs to be. However tall it is, the header and footer will always be visible.
To get a fixed header and footer, we use the following CSS:
We now have a full screen layout with a black header 50 pixels tall as well as a black footer 100 pixels tall. The dimensions and the color (or any other style, for that matter) is yours to choose.
How to Make a Fixed Footer and Header Full Screen Layout
The next step is extremely simple. All we need to do is to make the middle section fixed size as well.
This puts the middle section exactly between the header and footer, while stopping it from getting taller or shorter at the same time.
While doing this, I encountered another minor problem. I wanted to make a sidebar that also fits between the header and the footer. This, again, is simple.
First, we change the contents of the “section” html element:
We now add the following CSS:
Now we have two fixed width sidebars on each side of the middle section, both filling up the vertical space between the header and the footer in the same was as the middle div does. Why absolute? To demonstrate what’s probably a better way to do this than what we used in the previous step.
What’s the Difference Between Fixed and Absolute Positioning?
The main difference here is that fixed looks at the page window to determine the position, while absolute looks to the first relative parent. Having the columns in the above example with a fixed positioning would cause them to go over or under the header and the footer, depending on the z-index, instead of being placed between the two entirely. You could probably use fixed and then set the top and the bottom to the same value as the header and footer heights, but this makes it so you have one less thing to take care of later.
In any case, that’s it. You now know how to make a fixed header and footer layout, as well as a full screen layout with CSS. You probably aren’t sure what you’re gonna use a full screen layout for, but at least you know how.