CSS beiseite Höhe 100%, wenn Sie mit sticky footer

Hier eine kleine demo von dem, was ich bin, zu erklären: wenig link.

Erste, position Ihre header und footer mit absolute und fixed bzw. Hinzufügen 40px Polsterung auf der Ober-und Unterseite der body, und stellen Sie sicher, Ihre box-sizing ist border-box. Stellen Sie Ihre aside's height zu 100%, und auch stellen Sie sicher, es ist ein border-box. Im Grunde;

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*/
}