Home/ Questions/Q 6988401
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T19:04:37+00:00

I’m trying to create a simple HTML layout where there is a header, content

  • 0

I’m trying to create a simple HTML layout where there is a header, content and footer section vertically layed out.

The heights of both header and footer should be flexible, determined by the content.

The height of the content section should be the remaining height, so the entire layout uses the full height of the window. The content section would be scrollable.

So, in order:

  1. Header. Height depends on content height. No scrollbars.
  2. Content. Height is the remainder; window_height – (header_height + footer_height). Scrollbar if needed (overflow: auto;)
  3. Footer. Height depends on content height. No scrollbars.

There are many examples for static header and footer heights but I found none that can deal with content-based heights.

I’ve tried plain divs with position: absolute/relative/fixed. I’ve tried divs with display: table/table-row/table-cell in several configurations. I’ve even tried using an actual . But none of these seem to work. Here’s one of the many failed attempts: http://jsbin.com/uveloj/15/edit

How can I do this without scripting (I prefer not to rely on JS whenever possible), if it is even possible at all.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Without using JavaScript I don’t think this is possible. In order to get the middle scroll you desire the content area must have a set height. If the header and footer can change dynamically there is no way to update the height of the content area to accommodate for scrolling without using JavaScript. However, this is a pretty simple layout if you want to just write a few lines of JS. I have a nice example for you:

    http://jsfiddle.net/rogerblanton/8ctJJ/

    Frames SHOULD NOT be used.

    • 0