Question

在html中，我在内联css中将div高度指定为100%，当div的加载高度更改为0.为什么会发生？参考这个 http://jsfiddle.net/CLjH3/3/

这是我的代码示例：

display();

function display() {
  var elementHeight = $("#container").height();

  alert("ElementHeight :" + elementHeight);

  var elementWidth = $("#container").width();

  alert("ElementWidth :" + elementWidth);
}

<head>
  <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>

<body>
  <div id="container" style="height:100%;width:100%;border:solid 1px red;">
  </div>
</body>

Answer 1

设置body和html身高：

body, html {
    height: 100%;
}

Answer 2

的 Demo

为了使百分比值适用于身高，必须确定父亲的身高。唯一的例外是 root 元素<html>，它可以是百分比高度。

所以，除了<html>之外，你已经给出了所有元素的高度，所以你应该做的就是添加：

html, body { height: 100%; }

来自文档 -

是根据高度来计算的包含块。如果包含块的高度不是明确指定，该值计算为auto。百分比高度根元素（例如）相对于初始元素包含块（其尺寸等于的尺寸）视口）。

在{ - 3}}
上查看详情
来源MDN Percent Doc one

css内联样式高度100％不适用于div

2 个答案: