CODEWITHSUNDEEP
htmlcssheight
Lorenzo Pimps
Lorenzo Pimps

Reputation: 121

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

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).

Upvotes: 3

Views: 6184

Answers (1)

buschtoens
buschtoens

Reputation: 8541

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.

Upvotes: 4

Related Questions