How to make a Elastic Vertical Layout?

Question

I have a page that has 2 areas: header and content.
The header should be [of course] fixed at the top, and has no fixed height, and the content below it.

The point is that I need my content area to be scrolled if it overflows... Like: the header should be always there, but the content can be scrolled down, i.e. your browser window, with the bars always at the top and the page scrolling.

I'm using JS to do this in a different page, where the "footer" has a fixed height, so I could say "hey, content, use the page height minus the footer height".

Can I implement this with only HTML+CSS, or do I need to use JS? And how?

Answer 1

I'd recommend you have a look around the www.sitepoint.com forums section - there's a lot of pointers to different ways to achieve various layouts.

Answer 2

This should do it...

#header {
  position:fixed;
}

Answer 3

Having a set header height will make this easier, but ultimately, javascript will help you accomplish what you're looking for. Basically you need to know the height of the users screen and the height of your header. Subtract the height of the header from the height of the users screen, and use that value to set the height of your content.

Make sure to set overflow:auto; to get the scroll bars for your content.

You are using divs for your layout, not tables, right? If not, consider making that change as well. Web designs using div's are much easier to manipulate than table designs.

This link should help you with the specific JS properties needed to get the height of the screen: Here

Answer 4

You need only CSS. The following code will make a 100px high header, a 50px high footer and a div called "content" in the middle that will fill the rest of the page. The whole thing will take all the available space inside the viewport. If you resize the browser window, the page will scale accordingly.

If there's enough stuff in the "content" div you'll get a scrollbar inside it. The scrollbar will not cover any part of the header or the footer, it will be inside the "content" div.

<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>

div#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
}

div#content {
    position: fixed;
    top: 100px;
    left: 0;
    right: 0;
    bottom: 50px;
    overflow: auto;
}


div#footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
}

Setting "left" and "right" differently you can make it take only a certain amount of the available space.

div#header {
    position: fixed;
    top: 0;
    left: 20%;
    right: 20%;
    height: 100px;
}

div#content {
    position: fixed;
    top: 100px;
    left: 20%;
    right: 20%;
    bottom: 50px;
    overflow: auto;
}


div#footer {
    position: fixed;
    bottom: 0;
    left: 20%;
    right: 20%;
    height: 50px;
}

With the above CSS the whole thing will be centered and leave 40% of the horizontally available space empty.