I have a layout in which the background color extends to the height of the browser, but not the height of the content.

Starting with this JSFiddle: <http://fiddle.jshell.net/EvilClosetMonkey/g2Hmf/>

I get a layout in the image below. The height of the 3-columns is the browser (or frame, in the case of JSFiddle), plus the height of the "header" row, plus the height of the "breadcrumb" row. This results in a little bit of scroll, but not much.

![enter image description here](https://i.stack.imgur.com/kXFsg.png)

In this case the contents do not fill the full height, but I still wish the color to reach the bottom of the browser space. The trouble comes up if I add content to one of the columns. In this case, the background color still stops where it did before, but the content continues!

JSFiddle: <http://fiddle.jshell.net/EvilClosetMonkey/g2Hmf/1/>

![enter image description here](https://i.stack.imgur.com/FDhvS.png)

**How can I get my background color to consume the height of *content*, when it reaches past the browser height, not just the browser height?**

Variations of `height: 100%` on the columns have not yielded success. I've also tried putting all contents into the `flex` layout (not just the columns), but that did not create any different results.

HTML and CSS blocks below, for reference without visiting JSFiddle:

```
<div id="header">Header</div>
<div id="crumbs">Breadcrumb</div>
<div id="content">
    <div id="navigation">Nav</div>
    <div id="workspace">Contents</div>
    <div id="inspector">Info</div>
</div>

html, body {
    height: 100%;
    margin: 0;
}

#header {
    background-color: red;
}

#crumbs {
    background-color: blue;
}

#navigation {
    background-color: green;

    -webkit-box-flex: 0 0 240px;
    -moz-box-flex: 0 0 240px;
    -webkit-flex: 0 0 240px;
    -ms-flex: 0 0 240px;
    flex: 0 0 240px;
}

#workspace {
    background-color: orange;

    -webkit-box-flex: 1 1 auto;
    -moz-box-flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

#inspector {
    background-color: yellow;

    -webkit-box-flex: 0 0 240px;
    -moz-box-flex: 0 0 240px;
    -webkit-flex: 0 0 240px;
    -ms-flex: 0 0 240px;
    flex: 0 0 240px;
}

#content {
    height: 100%;

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

```