Panel Content Footer

by romario333

HTML

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

CSS

* {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
 }
 
.header {
     height: 2em;
     border-bottom: 1px solid #ccc;
}

.content {
    position: fixed; /* can be absolute too */
    top: 3em;
    bottom: 3em;
    overflow: auto;
    width: 100%;
}

.footer {
    position: fixed; /* can be absolute too */
    bottom: 0;
    width: 100%;
    height: 3em;
    border-top: 1px solid #ccc;
 }