Specifying height of divs as 100% of container minus height of sibling div

Question

I've got a divs in the following layout ```

``` My problem is that divContent how has a height of 100% of the body. What I need it to do is take up the entire height of divBody minus the height of divHeader. So I set the height of divContent to auto: ```

``` No…

Accepted Answer

Since you know the height of `#divHeader` is 30px, the simple answer to your question would be to use `calc()` on `#divContent` like this:

```
#divContent {
  height: calc(100% - 30px);
}
```

The tough part is to set height of a sibling like `#divContent` when the height of the other sibling(s) are unknown or dynamic. That's when CSS Flex comes in handy:

```
.flex {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.top {
  flex-shrink: 0;
}

.bottom {
  height: 100%;
}
```

Element with class `bottom` will use 100% height minus the height of its siblings. The `flex-shrink: 0` rule is important, primarily for iOS devices, to avoid shrinking on the sibling.

Working example on Codepen here.

Specifying height of divs as 100% of container minus height of sibling div

Solution

Problem