有时html高度：100％不会填满整个窗口

Question

我有一个标题和一个可编辑的内容框，其中包含 css ：

html, body {
    height: 100%;
}
body {
    overflow: hidden;
}
.header {
    height: 100px;
    line-height: 100px;
    background: wheat;
}
.content {
    border: 1px solid #333;
    width: 80%;
    height: calc(100% - 100px);
    overflow: scroll;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 10px;
}

HTML：

<div class="header">Header</div>
<div class="content" contenteditable="true"></div>

jsfiddle:

当content的滚动条显示时，然后单击返回键，html将不再填充页面。

这是显示正在发生的事情的图片：

正如您所看到的，html约为10px。 这也发生在我的两个朋友的计算机上，每次他们就像我刚才所说的那样，但它从未发生在我的电脑上，而且我们处于相同的环境中。

环境： mac pro，chrome版本：42.0（在safari中没有发生）

我做了什么： 当我尝试将position: fixed添加到html元素时，它会起作用，问题就会消失

我的问题： 我想知道，这是一个铬的错误吗？为什么position: fixed可以修复它，发生了什么？

在我的真实项目中，正文是{margin: 0}，但问题仍然存在，但是如果它有body{margin: 0}，那么演示工作正常，我很困惑。