我找到了一种方法，使一个div容器占据至少一个页面的全部高度，通过设置最小高度:100%;。然而，当我添加一个嵌套的div并设置高度:100%;，它不会延伸到容器的高度。有办法解决吗?
Html, body { 高度:100%; 保证金:0; ｝ #控制{ 最小高度:100%; 背景:粉色; ｝ # containment-shadow-left { 高度:100%; 背景:水; ｝ < div id = "容器" > < div id = " containment-shadow-left " > 你好世界! < / div > < / div >
当前回答
我不相信这是浏览器的bug。所有的行为都是一样的——也就是说，一旦停止指定显式高度，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%的高度而无需指定。
其他回答
我想我会分享这个，因为我在任何地方都没有看到这个，这是我用来修复我的解决方案。
解决方案:min-height:继承;
我有一个父结点有一个指定的最小高度，我需要一个子结点也有这个高度。
.parent { 最小高度:300 px; background - color: rgba(255255年,0,0.5);/ /黄色 ｝ .child { 最小高度:继承; background - color: rgba(0255年,0,0.5);/ /蓝色 ｝ p { 填充:20 px; 颜色:红色; 字体类型:无衬线; 粗细:大胆的; text-align:中心; ｝ < div class = "父" > < div class = "孩子" > <p>黄色+蓝色=绿色:)</p> < / div > < / div >
这样，子节点现在就相当于最小高度的100%。
我希望有些人会觉得这有用:)
添加这个到父组件为我修复了它:
display: flex;
flex-direction: column;
因为谷歌员工:
这个jquery解决方案使#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>
这对我来说是适用的，基于百分比的身高和父母仍然根据孩子的身高增长。 在Firefox, Chrome和Safari中工作良好。
.parent { 位置:相对; 最小高度:100%; ｝ .child { 最小高度:100 vh; ｝ < div class = "父" > < div class = "孩子" > < / div > < / div >
这是在@jackocnr的评论中添加的，但我错过了。对于现代浏览器，我认为这是最好的方法。
如果容器太小，它会让内部元素填充整个容器，但如果容器太大，它会扩展容器的高度。
#containment {
min-height: 100%;
display: flex;
flex-direction: column;
}
#containment-shadow-left {
flex: 1;
}
