How to create a fixed header and footer with dynamic content?

Question

I have to make a layout with a .header and .content like with fixed height (for example 100px) and 100% width.

Then, I have to put a content with dynamical height that cover the void space.

<!-- [...] -->
<style type="text/css">
  body {
    margin: 0;
    padding: 0;
  }
  
  .wrapper {
    height: 100%;
    width: 100%;
    position: absolute;
  }
  
  .header {
    position: absolute;
    top: 0;
    height: 100px;
    width: 100%;
    background: #0F0;
  }
  
  .footer {
    position: absolute;
    bottom: 0;
    height: 100px;
    width: 100%;
    background: #0F0;
  }
  
  .content {
    position: absolute;
    height: 100%;
    width: 100%;
    background: #F00;
    padding: 100px 0;
    margin: -100px 0;
  }
</style>
</head>

<body>
  <div class="wrapper">
    <div class="header">
    </div>
    <div class="content">
    </div>
    <div class="footer">
    </div>
  </div>

</body>

</html>

This layout HAD to permit me to put a header and footer with fixed height, and a content with images that scale dimensions (inside a div.content).

Hi Lorenzo, what is the problem you are having? Could you try to explain a little more. — hairynuggets
So you want the .content to fill the space between .header and .footer? — jackJoe
You want a HTML page with a scroll-fixed header and footer and scroll-able content? — buschtoens
yes, i'm unable to came out with a solution... friend tolds me that there is a javascript way... but i didn't find it.. — Lorenzo Pimps
@silvinci the web-site will be horizontal scrolling... so i need a layout that covers 100% in height... so that isn't scrollable in height but only in width — Lorenzo Pimps

buschtoens buschtoens · Accepted Answer · 2011-11-04T16:45:34

First of all: If you have a unique element, like a page header/footer, please use an id and not a class. A class is used for elements that appear frequently or have something in common that makes it semantically correct to group them, like description texts.

Now your problem. We have to give the html and body a total height of 100% so they won't resize and we can be sure that we will use the whole page.

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

You then used a wrapper, but we can omit that. <body> is already a wrapper. The header and footer explain their self.

#header {
    height: 100px;

    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    background: #0F0;
}
#footer {
    height: 100px;

    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    background: #0F0;
}

The content is a bit tricky. It needs to be expanded to 100% - 100px at the top - 100px at the bottom. Impossible? No.

#content {
    position: absolute;

    top: 100px;
    bottom: 100px;
    left: 0;
    right: 0;

    overflow: hidden; /* No scrollbars | Make this 'auto' if you want them */

    background: #F00;
}

Finished. You can have a look at it on jsFiddle.

How to create a fixed header and footer with dynamic content?

1 Answers