iframe和div中的相同元素不同地计算高度

Question

我发现iframe中元素的奇怪行为。 如果我在iframe和div中具有相同样式的元素相同，则样式将被不同地识别。 通常，“身高：100％”是指父母身高的100％。并且如果未设置父级的高度-子级的高度将为0。但是在iframe中，子级会填充所有窗口高度。 这是我的示例Codepen 请从codepen运行它。

let iframe = document.getElementById('me'),
    body = iframe.contentDocument.body,
    head = iframe.contentDocument.head,
    box = document.createElement('div'),
    child = document.createElement('div'),
    style = document.createElement('style')

style.textContent = `
body, html {
  margin: 0;
}
.box {
  background: grey;
  padding: 10px;
}
.child {
  height: 100%;
  background: red;
}
`
head.appendChild(style)

box.setAttribute('class', 'box')
child.setAttribute('class', 'child')

box.appendChild(child)
body.appendChild(box)

body, html {
  margin: 0;
}

.box {
  background: grey;
  padding: 10px;
}
.child {
  height: 100%;
  background: red;
}

.cont {
  display: inline-block;
  width: 300px;
  height: 200px;
  border: 2px solid green;
}

iframe {
  display: inline-block;
  width: 300px;
  height: 200px;
  border: 2px solid green;
}

<div class="cont">
  <div class="box">
  <div class="child"></div>  
</div>
</div>

<iframe id="me"></iframe>