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

Question

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

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

我在下图中得到了一个布局。 3 列的高度是浏览器(或框架，在 JSFiddle 的情况下)加上“标题”行的高度，再加上“面包屑”行的高度。这会导致一点点滚动，但不会太多。

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

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

当背景颜色超过浏览器高度，而不仅仅是浏览器高度时，如何让我的背景颜色占用内容的高度？

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

下面的 HTML 和 CSS block ，供在不访问 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

只需从 body 中删除 height:100% :) 这样它就会扩展到所有可用空间，而不是只扩展到可见屏幕的 100%。也许 100% 的事情是针对 div 和表格的。 body 已经无处不在。但将其限制为 100% 的可见屏幕可能对其他一些网站有用。

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