彩色背景停止在页面底部，而不是内容，使用Flex布局

Question

我有一个布局，其中背景颜色延伸到浏览器的高度，但不是内容的高度。

从这个JSFiddle开始：http://fiddle.jshell.net/EvilClosetMonkey/g2Hmf/

我在下面的图片中找到了一个布局。 3列的高度是浏览器（或框架，在JSFiddle的情况下），加上＆＃34;标题＆＃34;的高度。行，加上＆＃34;面包屑的高度＆＃34;行。这导致了一点点滚动，但并不多。

在这种情况下，内容不会填满整个高度，但我仍希望颜色到达浏览器空间的底部。如果我将内容添加到其中一列，则会出现问题。在这种情况下，背景颜色仍然停在之前的位置，但内容仍在继续！

JSFiddle：http://fiddle.jshell.net/EvilClosetMonkey/g2Hmf/1/

如果超出浏览器高度而不仅仅是浏览器高度，我怎样才能让背景颜色消耗内容的高度？

列上height: 100%的变化未取得成功。我还尝试将所有内容放入flex布局（不仅仅是列），但这并没有产生任何不同的结果。

下面的HTML和CSS块，供参考，无需访问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;
}

Answer 1

只需从身体移除高度：100％:)因此它会扩展到所有可用空间，而不是仅扩展到可见屏幕的100％。也许100％的东西是div和table。身体已经无处不在。但是将其限制在可见屏幕的100％可能对其他一些网站有用。

以上是您在问题中提供的第二个链接。

Answer 2

这个怎么样？ http://fiddle.jshell.net/g2Hmf/4/

此修补程序对#header使用#crumbs和height margin-top以及#content。

我还添加了#wrapper。