Container variable header height and scrollable body

by rosenfeld

HTML

<!doctype html>
<html>
    <head>
        <title>Container variable header height and scrollable body</title>
    </head>
    <body>
        
<div id=container>
    <div id=container-header>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel lacus ac tortor venenatis faucibus. Nunc in nulla vel ligula sagittis sodales quis ac risus. Ut et venenatis orci. Phasellus imperdiet molestie hendrerit. Pellentesque mauris nunc, varius id convallis eget, facilisis ac dui. Maecenas vulputate tincidunt tellus a venenatis. Pellentesque congue sodales est id aliquet. Aenean tincidunt, magna eget tempor laoreet, turpis nunc rhoncus risus, sed dapibus dolor libero in dui. In et nibh eu metus consequat pretium.
    </div>
    <div id=container-body>

        Nullam laoreet ante quis lorem viverra eu elementum justo interdum. Nunc nec arcu id nulla lacinia fermentum eu ut tortor. Vivamus sollicitudin, dui non mollis viverra, leo turpis sollicitudin nibh, a rutrum turpis nulla in tellus. Praesent et mauris lectus, at facilisis ipsum. Fusce imperdiet auctor condimentum. Morbi tincidunt, massa at elementum facilisis, arcu enim aliquam ligula, eget vulputate odio odio nec purus. Duis aliquam erat vitae ligula porttitor sit amet tincidunt ipsum convallis. Nam consectetur egestas nulla ac volutpat. Aliquam aliquet rutrum turpis, ultricies pellentesque augue malesuada id. Sed lobortis nunc a nisi ullamcorper pharetra. Nullam nisi leo, malesuada at fermentum molestie, volutpat ac libero. Nam at iaculis tortor. Cras accumsan lacinia mauris eu tempus. Integer ac mi elit.

        Vestibulum sit amet ipsum id est bibendum hendrerit. Donec sagittis eros eu velit tristique id interdum odio scelerisque. Maecenas ornare pharetra pulvinar. Quisque placerat felis quis urna laoreet eget faucibus nunc porta. Donec quam orci, elementum ac tincidunt eu, vulputate a justo. Quisque quis dui eros, ut feugiat augue. In luctus pharetra faucibus. Nunc a adipiscing odio. Phasellus...

CSS

#container {
    position: absolute;
    left: 200px;
    right: 50px;
    top: 50px;
    bottom: 100px;
    background-color: yellow;
}

#container-header {
    background-color: blue; color: white;
    border-bottom: solid thick green;
}

#container-body {
    background-color: black; color: white;
}

#container-body {
    overflow: auto;
    position: absolute;
    right: 20px;
    left: 20px;
    bottom: 20px;
    /* what should be top here? */
}

#container, #container > div {
    padding: 20px;
}

JavaScript

var headerDiv = document.getElementById('container-header');
(document.body.onresize = function() {
    var headerHeight = headerDiv.offsetHeight + 20;

    document.getElementById('container-body').style.top = headerHeight + 'px'
})();