我有一个固定宽度的内部包含可变大小的内容。我希望inner-container的高度与内容一样大，并且至少与屏幕的高度一样大（当内容较小时）。该页面还有一个固定大小的页脚。
通常我会考虑将min-height: 100%设置为内部和外部（根）容器，但这在CSS中不起作用。
我在下面提供的代码是我在更大页面上的情况的简化示例（root-container中有更多不同的元素）。绿色inner-container 不会填充整个屏幕的高度，正如我所希望的那样。我确实设法管理它（例如设置root-container的{{1}}代替height，但是当内容大于屏幕高度时，渲染行为错误（你可以通过将min-height更改为更大的值来快速模拟，例如21px。。我想让它工作（绿色列至少填充屏幕的高度，黑色在它的两侧贯穿整个高度和页脚）在两种情况下都在最底层。
font-size同样的例子上传到JSFiddle：http://jsfiddle.net/gNT8m/
答案 0 :(得分：1)
这是bug：具有最小高度的父母的孩子不能继承身高属性。
有许多潜在的解决方法，但你应该按照最初尝试的方式工作。
<强>更新
至于解决方法，最简单的方法是在display: flex上设置#root-container。我没有对这个解决方案进行跨浏览器测试，所以你可能想进一步调查它，但使用flexbox是一个很好的方法。
您需要添加其他一些细节，例如将position: relative添加到页脚并向padding: <your footer's height>px添加一些空格（#inner-container），以确保您的页脚不会掩盖任何内容。