So I have two `div`s, 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:

```css
.container {
  height: 100%;
}
.header {
  height: 50px; // height is fixed, not great for dynamic content
}
.content {
  height: calc(100% - 50px); // height is a subtraction
}
```

```html
<div class='container'>
  <div class='header'>Header</div>
  <div class='content'>
    Content
  </div>
</div>
```

See switching of content [here](https://plnkr.co/edit/Uqc6XWAvxiR7oARxsBsY?p=preview) 

Is there a CSS only solution in which would calculate the `height` of the `.content` based on the size of the `.header`?