Home/ Questions/Q 8090619
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T19:46:58+00:00

I’m trying to get a simple solution for this layout. This is the simplified

  • 0

I’m trying to get a simple solution for this layout.
This is the simplified html.

<div class='wrapper'>
<div class='header'></div>
<div class='middle'> TEXT </div>
<div class='footer'></div>
</div>

Header and footer have a fixed height in pixels.
middle can have a variable height, depending on the content.
I want wrapper to have a minimum height of 100%. So if the text inside middle is small, the middle div should expand to fill the browser page. And if it’s too long, the whole page should be scrollable.

Is this possible easily? Maybe changing something in the layout?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    here’s your solution: http://jsfiddle.net/S4akv/1/

    You do NOT want to set a hard height for the .middle. If your content is only a few lines then you will end up with scrollbars where none are needed.

    With a header and footer, you also don’t want height: 100% on your .middle class because it will push your footer down, forcing a scrollbar no matter what. You also don’t want a clear-cut height:100% because most browsers will interpret this as 100% of the browser height, so when you resize your browser to be larger, either the height won’t change or the footer won’t move.

    The best solution here is to have your wrapper and any associating backgrounds attached to that. Depending on the content within your .middle div this answer could change, but given the simple parameters this is the most elegant way to do it.

    the secret is to make sure that all containing elements have a height set. reason being, any block element with height: 100% will only be 100% of the area containing it. in this case you need to set height for middle, wrapper and body, html

    body,html { height: 100%; margin:0; padding:0; }
.wrapper { min-height: 100%; width: 100%; background-color: red; position:relative; padding-bottom: 200px; }
.header { height: 200px; width: 100%; background-color: blue; }
.middle {  }
.footer { height: 200px; width: 100%; background-color: green; position:absolute; bottom: 0; }

    If you have nested content within .middle that also needs to be 100% height there is a better way, using a combination of height, absolute positioning and negative margins. There are a million ways to skin a cat. Well, a handful at least 🙂

    edited to add padding to .wrapper to make room for footer. The bottom padding of wrapper must be the same height as the footer

    • 0