CSS Only - height of div based off sibling - html

Question

So I have two divs, one is a .header and the other is the .content, together they would take up the whole page. The .header would be set in place and only the content would scroll.
I would like to make the content's height to be dynamic based on the height of the .header without javascript.
This could be achieved with a calc if the .header had fixed height, but it doesn't because the height can vary.
Code:
.container {
height: 100%;
}
.header {
height: 50px; // height is fixed, not great for dynamic content
}
.content {
height: calc(100% - 50px); // height is a subtraction
}
<div class='container'>
<div class='header'>Header</div>
<div class='content'>
Content
</div>
</div>
See switching of content here
Is there a CSS only solution in which would calculate the height of the .content based on the size of the .header?

Answer 1

you can use flexbox for that
html,
body {
margin: 0;
height: 100%;
}
.container {
display: flex;
flex-direction: column;
height:100%
}
.header {
display: flex;
border: 5px solid red
}
.content {
flex: 1;
border: 5px solid green
}
<div class='container'>
<div class='header'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at libero ut arcu tincidunt porta. Vestibulum in ex nec neque rutrum vestibulum a nec eros. Morbi accumsan nisl in justo viverra, non euismod libero sagittis. Aenean vulputate tortor
molestie metus iaculis ornare. Vestibulum posuere, mauris eget tempor tincidunt, arcu risus eleifend felis, ac fringilla mauris lorem sit amet risus. Ut id ante eu nisl hendrerit tincidunt ac ut velit. Sed efficitur ante in neque mollis feugiat. Nulla
sed erat nec ipsum fermentum tristique. Sed auctor dolor quis fringilla ullamcorper. Duis luctus ligula nibh, ac facilisis eros dapibus at. Aliquam eget vestibulum sem, a euismod ante. Quisque at arcu arcu. Nunc massa tellus, imperdiet in facilisis
vitae, maximus at neque. Maecenas et dictum enim.</div>
<div class='content'>
Nam vehicula tempor est et ultrices. Cras elementum, mi ac pellentesque ultricies, dui urna rutrum risus, quis tristique ante eros in tellus. Quisque sit amet varius erat. Aliquam dapibus eros augue, et blandit nulla volutpat nec. Duis nibh lacus, scelerisque
in interdum in, hendrerit eget justo. Pellentesque finibus nisi sed fermentum aliquet. Mauris feugiat, magna in sagittis dapibus, neque justo convallis risus, eget rutrum metus tellus eget lorem. Suspendisse at turpis faucibus eros dapibus feugiat
vel at elit. Sed ac arcu tempor, molestie elit ut, eleifend dolor. Morbi fringilla enim ac lectus lobortis, ac convallis orci mollis. Ut tempus quam sodales, tincidunt dolor non, dapibus neque. Fusce elementum magna dolor, non suscipit est imperdiet
at. Vivamus mattis augue vestibulum, ultricies dui ac, finibus erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. Curabitur id cursus sapien. Phasellus placerat finibus vehicula. Donec
sit amet nisi eget risus venenatis euismod. Curabitur quis felis tempus, egestas ante eget, efficitur dolor. Duis ullamcorper commodo massa, a efficitur turpis finibus nec. Cras eget dui purus.
</div>
</div>
Or CSS tables for older browsers (as OP requested in comment)
html,
body {
margin: 0;
height: 100%;
}
.container {
display: table;
width: 100%;
height: 100%
}
.header {
display: table-row;
background: red
}
.content {
display: table-row;
background: green
}
<div class='container'>
<div class='header'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at libero ut arcu tincidunt porta. Vestibulum in ex nec neque rutrum vestibulum a nec eros. Morbi accumsan nisl in justo viverra, non euismod libero sagittis. Aenean vulputate tortor
molestie metus iaculis ornare. Vestibulum posuere, mauris eget tempor tincidunt, arcu risus eleifend felis, ac fringilla mauris lorem sit amet risus. Ut id ante eu nisl hendrerit tincidunt ac ut velit. Sed efficitur ante in neque mollis feugiat. Nulla
sed erat nec ipsum fermentum tristique. Sed auctor dolor quis fringilla ullamcorper. Duis luctus ligula nibh, ac facilisis eros dapibus at. Aliquam eget vestibulum sem, a euismod ante. Quisque at arcu arcu. Nunc massa tellus, imperdiet in facilisis
vitae, maximus at neque. Maecenas et dictum enim.</div>
<div class='content'>
Nam vehicula tempor est et ultrices. Cras elementum, mi ac pellentesque ultricies, dui urna rutrum risus, quis tristique ante eros in tellus. Quisque sit amet varius erat. Aliquam dapibus eros augue, et blandit nulla volutpat nec. Duis nibh lacus, scelerisque
in interdum in, hendrerit eget justo. Pellentesque finibus nisi sed fermentum aliquet. Mauris feugiat, magna in sagittis dapibus, neque justo convallis risus, eget rutrum metus tellus eget lorem. Suspendisse at turpis faucibus eros dapibus feugiat
vel at elit. Sed ac arcu tempor, molestie elit ut, eleifend dolor. Morbi fringilla enim ac lectus lobortis, ac convallis orci mollis. Ut tempus quam sodales, tincidunt dolor non, dapibus neque. Fusce elementum magna dolor, non suscipit est imperdiet
at. Vivamus mattis augue vestibulum, ultricies dui ac, finibus erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. Curabitur id cursus sapien. Phasellus placerat finibus vehicula. Donec
sit amet nisi eget risus venenatis euismod. Curabitur quis felis tempus, egestas ante eget, efficitur dolor. Duis ullamcorper commodo massa, a efficitur turpis finibus nec. Cras eget dui purus.
</div>
</div>

Answer 2

Use display: flex
html, body { margin: 0; height: 100%; }
.container {
display: flex;
flex-direction: column;
height: 100%;
}
.header {
background: blue;
}
.content {
flex: 1;
background: red;
}
<div class='container'>
<div class='header'> Header </div>
<div class='content'>
Content
</div>
</div>
Or display: table
html, body { margin: 0; height: 100%; }
.container {
display: table;
width: 100%;
height: 100%;
}
.header {
display: table-row;
height: 0; /* shrink to fit content */
background: blue;
}
.content {
display: table-row;
background: red;
}
<div class='container'>
<div class='header'> Header </div>
<div class='content'>
Content
</div>
</div>
And merged with fallback, where flex kicks in if supported.
Note, the header's height: 0 is needed if it should shrink to content
html, body { margin: 0; height: 100%; }
.container {
display: table;
width: 100%;
height: 100%;
}
.header {
display: table-row;
height: 0; /* shrink to fit content */
background: blue;
}
.content {
display: table-row;
background: red;
}
#supports (display: flex) {
.container {
display: flex;
flex-direction: column;
}
.header {
display: block;
height: auto;
}
.content {
flex: 1;
display: block;
}
}
<div class='container'>
<div class='header'> Header </div>
<div class='content'>
Content
</div>
</div>