Scrolling div

A scrolling div with a div, with a fixed header...

by oakley808

HTML

<div class="d1">
    <div class="header">HEADER</div> 
    <div class="body">
        FIRST <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />
        test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />forth <br />third <br />second <br />LAST <br />
    <div class="footer"></div>
    </div>
</div>

CSS

.d1 {
    height: 200px;
    position: relative;
    overflow:hidden;
}
.header {
    background-color: #efefef;
    width:100%;
    height:50px;
    position:absolute;
    top:0;
}
.body{
    border: 1px solid red;
    position: relative;
    top: 50px;
    width:100%;
    height: 100%;
    box-sizing: border-box;
    overflow-y: scroll;
}
.footer {
    height:50px;
    width: 100%;
    position: relative;
    background-color: #efefef;
}


.d1{
    border:1px solid black;
}