我找到了一种方法，通过设置min-height: 100%;使div容器占据页面的至少全高。但是，当我添加嵌套div并设置height: 100%;时，它不会伸展到容器的高度。有办法解决吗？
html, body {
height: 100%;
margin: 0;
}
#containment {
min-height: 100%;
background: pink;
}
#containment-shadow-left {
height: 100%;
background: aqua;
}<div id="containment">
<div id="containment-shadow-left">
Hello World!
</div>
</div>这是一个报告的webkit（chrome / safari）bug，具有最小高度的父母的孩子不能继承高度属性：https://bugs.webkit.org/show_bug.cgi?id=26559
显然Firefox也受到影响（目前无法在IE中测试）
可能的解决方法：
当内部元素具有绝对定位时，该错误不会显示。
编辑于2014年4月10日
由于我目前正在开发一个项目，我真的需要使用min-height的父容器，以及继承容器高度的子元素，我做了一些更多的研究。
首先：我不再确定当前的浏览器行为是否真的是一个错误。 CSS2.1规范说：
百分比是根据生成的框的包含块的高度计算的。如果未明确指定包含块的高度（即，它取决于内容高度），并且此元素未绝对定位，则该值计算为“auto”。
如果我在我的容器上放置一个最小高度，我没有明确指定它的高度 - 所以我的元素应该得到一个auto高度。这正是Webkit和所有其他浏览器所做的。
其次，我找到了解决方法：
如果我用display:table将我的容器元素设置为height:inherit，它的行为方式与我给它100％的min-height完全相同。并且 - 更重要的是 - 如果我将子元素设置为display:table-cell，它将完美地继承容器元素的高度 - 无论是100％还是更高。
完整的CSS：
html, body {
height: 100%;
margin: 0;
}
#container {
background: green;
display: table;
height: inherit;
width: 100%;
}
#content {
background: red;
display: table-cell;
}
标记：
<div id="container">
<div id="content">
<p>content</p>
</div>
</div>
现在实现这一目标的最佳方法是使用display: flex;。但是，在尝试支持IE11时可能会遇到问题。根据https://caniuse.com使用flexbox：
使用最小高度时，IE 11不会正确垂直对齐项目
解决方案是在父母身上使用display: table;，在孩子身上使用display: table-row;，使用height: 100%;替代min-height: 100%;。
此处列出的大多数解决方案都使用display: table，table-row和/或table-cell，但它们不会复制与min-height: 100%;相同的行为，即：
height属性）;min-height;使用此解决方案时，行为是相同的，并且不需要属性min-height，这可以绕过错误。
它起作用的原因是因为，与大多数元素不同，使用display: table和table-row的元素将始终与其内容一样高。这使得他们的height属性与min-height类似。
html, body {
height: 100px;
margin: 0;
}
#containment {
display: table;
height: 100%;
background: pink;
width: 100%;
}
#containment-shadow-left {
display: table-row;
height: 100%;
background: aqua;
}
#content {
padding: 15px;
}
#demo {
display: none;
background-color: red;
height: 200px;
}
#demo-checkbox:checked ~ #demo {
display: block;
}<div id="containment">
<div id="containment-shadow-left">
<div id="content">
<input id="demo-checkbox" type="checkbox">
<label for="demo-checkbox">Click here for overflow demo</label>
<div id="demo">This is taller than #containment</div>
</div>
</div>
</div>虽然在这里建议使用display: flex;，但考虑使用display: grid;，因为它是widely supported。默认情况下，网格的唯一子节点将完全填充其父节点。
html, body {
height: 100%;
margin: 0;
padding: 0; /* Don't forget Safari */
}
#containment {
display: grid;
min-height: 100%;
background: pink;
}
#containment-shadow-left {
background: aqua;
}为了完成这个主题，我找到了一个解决方案，没有使用固定位置探索Here。
html, body, .wrapper, .parent, .child {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0;
padding: 0;
height: 100%;
}
.child {
overflow: auto;
background: gray;
}
.height-50 {
height: 50%;
width: 5em;
margin: 10px auto;
background: cyan;
}<div class="wrapper">
<div class="parent">
<div class="child">
<div class="height-50"></div>
</div>
</div>
</div>html, body, .wrapper, .parent, .child {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0;
padding: 0;
height: 100%;
}
.child {
overflow: auto;
background: gray;
}
.height-150 {
height: 150%;
width: 5em;
margin: 10px auto;
background: cyan;
}<div class="wrapper">
<div class="parent">
<div class="child">
<div class="height-150"></div>
</div>
</div>
</div>这对于我来说对于我来说是基于百分比的身高，父母仍然根据孩子的身高增长。适用于Firefox，Chrome和Safari。
.parent {
position: relative;
min-height: 100%;
}
.child {
min-height: 100vh;
}<div class="parent">
<div class="child"></div>
</div>在尝试我们的！ chrome知道当我将显示值设置为内联块时，我希望子元素的高度为100％。 btw设置浮动会导致它。
display:inline-block
更新
这不起作用。解决方案是获取parentnode offsetheight并使用javascript在页面和页面上使用它。
<script>
SomedivElement = document.getElementById('mydiv');
SomedivElement.style.height = String(nvleft.parentNode.offsetHeight) + 'px';
</script>
将height: 1px添加到父容器。适用于Chrome，FF，Safari。
以为我会分享这个，因为我没有在任何地方看到这一点，而且是我用来修复我的解决方案。
解决方案：min-height: inherit;
我有一个指定最小高度的父母，我需要一个孩子也是那个高度。
.parent {
min-height: 300px;
background-color: rgba(255,255,0,0.5); //yellow
}
.child {
min-height: inherit;
background-color: rgba(0,255,0,0.5); //blue
}
p {
padding: 20px;
color: red;
font-family: sans-serif;
font-weight: bold;
text-align: center;
}<div class="parent">
<div class="child">
<p>Yellow + Blue = Green :)</p>
</div>
</div>这样，孩子现在充当最小高度的100％的高度。
我希望有些人觉得这很有用:)
Kushagra Gour的解决方案确实有效（至少在Chrome和IE中）并且无需使用display: table;和display: table-cell;即可解决原始问题。见plunker：http://plnkr.co/edit/ULEgY1FDCsk8yiRTfOWU
根据需要，在外部div上设置min-height: 100%; height: 1px;会使其实际高度至少为100％。它还允许内部div正确地继承高度。
这是在@jackocnr的评论中添加的，但我错过了。对于现代浏览器，我认为这是最好的方法。
如果内部元素太小，它会使内部元素填充整个容器，但如果容器太大则会扩展容器的高度。
#containment {
min-height: 100%;
display: flex;
flex-direction: column;
}
#containment-shadow-left {
flex: 1;
}
我不相信这是浏览器的错误。所有行为都是一样的 - 也就是说，一旦你停止指定明确的高度，min-height基本上就是“最后一步”。
它似乎正是CSS 2.1规范的建议：http://www.w3.org/TR/CSS2/visudet.html#the-height-property
百分比是根据生成的框的包含块的高度计算的。如果未明确指定包含块的高度（即，它取决于内容高度），并且此元素未绝对定位，则该值计算为“auto”。
因此，由于min-height父级没有明确的height属性集，因此默认为auto。
有一些方法可以通过使用display: table-cell，或更新的样式，如flexbox，如果这对你的目标受众的浏览器是可能的。你也可以在某些情况下通过在绝对定位的内部元素上使用top和bottom属性来颠覆它，这样就可以在不指定的情况下获得100％的高度。
除了现有的答案，还有使用视口单元vh。下面简单的片段。当然它也可以和calc()一起使用，例如min-height: calc(100vh - 200px);页面页眉和页脚一起有200px高度。
body {
margin: 0;
}
.child {
min-height: 100vh;
background: pink;
}<div class="parent">
<div class="child"></div>
</div>对于谷歌：
这个jquery-workaround使#containment自动获得一个高度（by，height：auto），然后获得指定为像素值的实际高度。
<script type="text/javascript">
<!--
$(function () {
// workaround for webkit-bug http://stackoverflow.com/a/8468131/348841
var rz = function () {
$('#containment')
.css('height', 'auto')
.css('height', $('#containment').height() + 'px');
};
$(window).resize(function () {
rz();
});
rz();
})
-->
</script>
另一个JS解决方案，很简单，可以用来避免非简单的CSS或额外的标记/ hacky解决方案。
function minHeight(elm, percent) {
var windowHeight = isNaN(window.innerHeight) ?
window.clientHeight : window.innerHeight;
var height = windowHeight * percent / 100;
elm.style.minHeight = height + 'px';
}
W / jQuery：
function minHeight($elm, percent) {
var windowHeight = $(window).height();
var height = windowHeight * percent / 100;
$elm.css('min-height', height + 'px');
}
角度指令：
myModule.directive('minHeight', ['$window', function($window) {
return {
restrict: 'A',
link: function(scope, elm, attrs) {
var windowHeight = isNaN($window.innerHeight) ?
$window.clientHeight : $window.innerHeight;
var height = windowHeight * attrs.minHeight / 100;
elm.css('min-height', height + 'px');
}
};
}]);
要像这样使用：
<div>
<!-- height auto here -->
<div min-height="100">
<!-- This guy is at least 100% of window height but grows if needed -->
</div>
</div>