Question

I have a layout with header and sticky footer. Both are 40px high. Now I need to add aside with a scroolbar, which will fill the free space (verticaly). It should looks like that:

There are two restrictions:

• no JavaScript
• no CSS3 calc() function

Is there any strict CSS solution of this problem?

Answer 1

Here’s a little demo of what I’m about to explain: little link.

First, position your header and footer using absolute and fixed, respectively. Add 40px of padding to both top and bottom of body, and make sure its box-sizing is border-box. Set your aside‘s height to 100%, and also make sure it’s a border-box. Basically;

HTML:

<header>
    I'm a header!
</header>
<aside>
    Lots and lots and lots of content!
    Glee is awesome!
</aside>
<footer>
    I'm a footer!
</footer>

CSS:

html {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 100%;
}
body {
    padding-top: 40px;
    padding-bottom: 40px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 100%;
}
header {
    height: 40px;
    width: 100%;
    position: absolute;
    top: 0px;
}
footer {
    height: 40px;
    width: 100%;
    position: fixed;
    bottom: 0px;
}
aside {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 100%;
    overflow: auto; /*make sure there are scrollbars when needed*/
}