Fixed header & footer

With scrolling content between them.

by Rynne Cowham

HTML

<header>This is your fixed header</header>
<article>
    <sidebar>
         <h2>I am a sidebar...</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida lectus a enim dapibus placerat. Nam facilisis tortor sit amet nunc sagittis, in fermentum risus consectetur. Morbi eleifend turpis eget lacus lacinia, non tincidunt velit rhoncus. Donec orci ligula, dignissim eu ante at, vulputate ornare augue. In ac euismod augue, nec euismod augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc interdum sem vitae tempor consectetur.</p>
        <p>Proin at auctor massa. Suspendisse potenti. Aliquam euismod fringilla arcu quis blandit. Vivamus a sapien luctus, ultricies orci sed, accumsan orci. Fusce pretium rutrum ligula, sed euismod turpis luctus sit amet. Donec ut convallis ante, vel cursus velit. Quisque vitae mi id nulla semper interdum et adipiscing arcu. Aliquam nec tortor facilisis, rhoncus turpis ut, blandit justo. Aenean ut posuere ligula, sit amet blandit massa. Pellentesque rutrum eu mauris ac vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    </sidebar>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida lectus a enim dapibus placerat. Nam facilisis tortor sit amet nunc sagittis, in fermentum risus consectetur. Morbi eleifend turpis eget lacus lacinia, non tincidunt velit rhoncus. Donec orci ligula, dignissim eu ante at, vulputate ornare augue. In ac euismod augue, nec euismod augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc interdum sem vitae tempor consectetur.</p>
    <p>Proin at auctor massa. Suspendisse potenti. Aliquam euismod fringilla arcu quis blandit. Vivamus a sapien luctus, ultricies orci sed, accumsan orci. Fusce pretium rutrum ligula, sed euismod turpis luctus sit amet. Donec ut convallis ante, vel cursus velit. Quisque vitae mi id nulla...

CSS

body {
  margin: 0;
  padding: 0;
  max-width: 100%;
}
header, footer {
    position:fixed;
    width:100%;
    padding:6px;
    color:#fff;
}
header {
    top:0;
    background:#c00;
}
article {
    width:95%;
    margin:45px auto;
    padding: 0 15px;
}
sidebar {
    float:right;
    width:30%;
    padding:0 8px;
    border:1px solid #666;
    margin:0 8px;
    font-size:smaller;
    background-color:#efefef;
}
footer {
    bottom:0;
    background:#333;
}