Local view port with fixed header

by audetwebdesign

HTML

<div class="local-wrap">
    <div class="fixed">
       Some content which needs to be pinned to top of window
    </div>
    <div class="port">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer facilisis velit ut neque tempor quis cursus tortor suscipit. Curabitur rutrum magna vitae arcu pharetra eget cursus ante accumsan. Nunc commodo malesuada adipiscing. Pellentesque consequat laoreet sagittis. Sed sit amet erat augue. Morbi consectetur, elit quis iaculis cursus, mauris nulla hendrerit augue, ut faucibus elit sapien vitae justo. In a ipsum malesuada nulla rutrum luctus. Donec a enim sapien. Sed ultrices ligula ac neque vulputate luctus. Suspendisse pretium pretium felis, in aliquet risus fringilla at. Nunc cursus sagittis commodo.</p>
        <p>Vestibulum arcu lectus, venenatis non aliquam a, imperdiet nec neque. Sed facilisis, est eu sollicitudin ullamcorper, urna erat tincidunt lectus, laoreet pulvinar velit turpis sit amet ligula. Cras iaculis elit et augue aliquet ullamcorper. Sed metus sem, dictum mollis adipiscing lacinia, placerat at sapien. Mauris leo libero, consequat vel ultrices at, adipiscing imperdiet justo. Vestibulum vestibulum gravida nunc vel varius. Cras id velit venenatis dui ultrices vestibulum. Phasellus dapibus rutrum nulla, at malesuada elit pellentesque at. Vestibulum sit amet elit sapien.</p>
    </div>
</div>

CSS

.local-wrap {
    position: relative;
    outline: 1px dashed blue;
}
.local-wrap .fixed {
    position: absolute;
    top: 0;
    left: 0;
    background-color: lightgray;
    width: 100%;
    height: 5.00em;
}
.local-wrap .port {
    position: relative;
    top: 5.00em;
    min-height: 10em;
    height: 16em;
    overflow: auto;
    border: 1px solid gray;
    border-width: 0 1px 1px 1px;
}