Adjustable header with body

Attaching the header and footer to the top and bottom. Then scrollable inner body segment.

by Kikketer

HTML

<div class="detail-panel">
<div class="head">
    <h1>Header that is super long lots of words</h1>
</div>

<div class="filler"></div>

<div class="body">
Donec sollicitudin molestie malesuada. Curabitur aliquet quam id dui posuere blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Donec rutrum congue leo eget malesuada. Nulla porttitor accumsan tincidunt. Nulla quis lorem ut libero malesuada feugiat. Nulla porttitor accumsan tindunt.
        
        Nulla porttitor accumsan tincidunt. Donec rutrum congue leo eget malesuada. Sed porttitor lectus nibh.
    
    Donec rutrum congue leo eget malesuada. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Sed porttitor lectus nibh.
    
    Proin eget tortor risus. Proin eget tortor risus. Cras ultricies ligula sed magna dictum porta.
    Donec sollicitudin molestie malesuada. Curabitur aliquet quam id dui posuere blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Donec rutrum congue leo eget malesuada. Nulla porttitor accumsan tincidunt. Nulla quis lorem ut libero malesuada feugiat. Nulla porttitor accumsan tindunt.
        
        Nulla porttitor accumsan tincidunt. Donec rutrum congue leo eget malesuada. Sed porttitor lectus nibh.
    
    Donec rutrum congue leo eget malesuada. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Sed porttitor lectus...

CSS

body { padding: 0; margin: 15px; }

.detail-panel {
    width: 300px;    
    border: 1px solid orange;
    height: 80vh;
    overflow: hidden;
    position: absolute;
    top: 15px;
    left: 15px;
}

.head {
    background: lightblue;
    padding: 5px;
}
.head h1 {
    margin: 0;
}

.filler {
    position: relative !important;
    z-index: -999;
    width: 100%;
    background-color: red;
}

.body {
    position: relative;
    overflow: scroll;
    border: 1px solid purple;
    margin: 5px;
}

.footer {
    position: absolute;
    bottom: 0;
    background-color: white;
    width: 100%;
}