Question

我试图显示一个全屏iframe，但我网站的高度似乎停留在155px;当我删除了doctype时，它被神奇地修复了！

使用和不使用doctype声明尝试：

<!DOCTYPE html>
<html>
<body>
<iframe src="http://example.com" style="border: 0; width: 100%; height: 100%"></iframe>
</body>
</html>

为什么会发生这种情况？如何在保留HTML 5 doctype声明的同时获得全屏体？

Answer 1

原因（引用Frederic Hamidi的评论）：HTML5正文在Y轴上是弹性的。

解决方案：将身体（更新:) 和hmtl 身高100％。

html, body{
    height: 100%;
}

Answer 2

当您删除doctype时，您将浏览器置于'怪癖模式'，并且随着整个盒子模型的改变，它就像1999年一样。永远不要那样做。您应该忽略从删除doctype中获得的任何结果，因为它没有任何意义。现代网页需要一个doctype。

就全屏幕主体而言，您需要从浏览器将自行插入的html和body元素中删除边距或填充。此外，您将iframe的高度/宽度设置为100％，但不提供100％的参考。换句话说，100％的是什么？

这个问题的答案是，它总是100％的父元素，但父元素的高度设置为什么？现在，它什么都没有。