Fill remaining space

by amiramix

HTML

<div class="as-table">
    <div id="header">
        <p>This header can vary in height, it also doesn't have to be displayed as table-row. It will simply take the necessary space and the rest below will be taken by the second div which is displayed as table-row. Now adding some copy to artificially expand the header.</p>
        <div class="additional-padding"></div>
    </div>
    <div class="as-table-row">
        <div id="content">
            <p>This is the actual content that takes the rest of the available space.</p>
        </div>
    </div>
</div>

CSS

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}
p {
    margin: 0;
    padding: 0;
}
.additional-padding {
    height: 50px;
    background-color: #DE9;
}
.as-table {
    display: table;
    height: 100%;
    width: 100%;
}
.as-table-row {
    display: table-row;
    height: 100%;
}
#content {
    width: 100%;
    height: 100%;
    background-color: #33DD44;
}