Question

根据具体Content height: the 'height' property个百分点

指定百分比高度。百分比用计算相对于生成的框的包含块的高度。如果未明确指定包含块的高度（即，它取决于内容高度），这个元素不是绝对的定位后，该值计算为'auto'。

我写这个：

<body>
        <div style="height:auto;">
            <div style="height: 100%;background-color: blue;"></div>
        </div>
</body>

我认为内部div的高度必须为0。

但事实是，身高与身体的高度相等。（整个屏幕是蓝色的）

为什么？

测试： Chrome 34. IE 10 FF 28

发现问题！

在我的代码中：

<!DOCTYPE>

正确的方法是：

<!doctype html>

现在我想知道有什么不同？

Answer 1

内部div的高度是 0 - 因为

如果未明确指定包含块的高度（即，它取决于内容高度），并且此元素未完全定位，则该值将计算为“auto”。

所以你的内部div是100％，被计算为'auto' - 并且因为没有内容可以'自动'调整div的大小，所以它得到0，就像它的父级一样。

查看这两个JSFiddles之间的不同之处：

设置height:auto（就像你拥有它一样）：http://jsfiddle.net/9gZw8/

明确设置外部div height: 100px的高度（现在它确实填充了父级的100％）：http://jsfiddle.net/gE7ea/

Answer 2

试试这个：

<html>
<style>
  html, body, .box{
    height:100%;
    margin:0 auto;
  }
  .div1{
    height:40%;
    background-color:#666;
  }
</style>
<body>
  <div class="box">
    <div class="div1">TEST</div>
  </div>
</body>
</html>

Answer 3

这件事我认为你需要以这种方式定义

HTML

    <div class='main'>
        <div class='box'></div>
    </div>

CSS

body
{height:10000px;
}
.main
{width:100%;
height:50%;
background:#000000;

}

和之间的区别是什么（CSS设置内部块高度百分比，包含块到auto，出错了）

发现问题！

3 个答案: