css - DIV 高度不根据 css 改变

Question

因此，我在表单中放置了一个 div。表单在 min-height 100% 处拉伸(stretch)，但子 div 在将 height 或 min-height 设置为 100% 后拒绝拉伸(stretch)。但是当表单高度不是最小高度设置为 100% 时，div 会拉伸(stretch)。为什么会这样？

<form>
<div id="host">
</div>
</form>

body, html{
    height: 100%;
}
form
{
    min-height: 100%;
}

#host{
    min-height: 100%;
    background-color: red;
}

http://jsfiddle.net/fkuE8/

Answer 1

min-height: 用于设置元素的最小高度，例如

  height: 100%;         /* full height  */
  min-height: 100px;   /* at least  100px */

如果你设置一个百分比，它将使用尽可能少的空间