Question

HTML：

<div id="a">
  <div id="b">
  </div>
</div>

CSS：

  html, body {
    height: 100%;
    background: red;
    margin: 0;
  }
  #a {
    min-height: 100%;
    background: green;
  }
  #b {
    min-height: 100%;
    background: yellow;
  }

http://jsfiddle.net/otpxvb2u/

为什么浏览器显示绿色而不是黄色？

Answer 1

这种组合根本行不通。

你的外部元素有一个最小高度 - 这意味着，它的高度实际上取决于它的内容。如果内容大于100％，那么外部元素的实际高度将超过最小高度指定的100％。

但是现在你想要内部元素的高度也是100％的最小高度 - 所以内部元素必须寻找外部元素来确定它的实际高度，而另一种方式是相同的外部元素。这个等式是不可解决的。

因此，您需要为外部元素设置显式高度：height:100%

编辑与您的评论有关：

为什么@ George的解决方案有效？

height:1px充当了等式的一种“起始值”。

内部元素现在具有确定高度，1px - 所以对于外部元素，最小值为（100%，height-determined-by-height-of-child-element）现在可以确定 - 这将导致100%（该外部元素的父级的高度body），这会导致特定像素值作为计算值

现在内部元素的min-height:100%也可以启动 - 外部元素现在具有有效值（以像素为单位），因此最小值（100% of that-pixel-value ，1px）也可以计算内部元素，这将导致与外部元素有效的像素值相同。

Answer 2

使用height代替min-height

#a {
    height: 100%;
    background: green;
}
#b {
    height: 100%;
    background: yellow;       
}

更新了 DEMO

Answer 3

要继承高度，父元素需要高度定义。所以将height属性添加到父级。

#a {
    height: 100%;
    min-height: 100%;        
    background: green;
}

Fiddle

Answer 4

或者您可以修复像素中的最小高度

 #b {
    min-height: 200px;
    background: yellow;
  }

检查小提琴 http://jsfiddle.net/otpxvb2u/4/

Answer 5

提供#b

的高度

#b {
height: 100px;
....
....

或

给予身高：100％;到#a和#b

#a,#b{
height:100%;
....
....

Answer 6

#a
{
height:auto;
}

#b
{
height:auto;
min-height:200px;
}

HTML嵌套的最小高度

6 个答案: