Kev*_*han 0 html css google-chrome
假设您希望您的内容占据100%视口的高度。您过去必须将html和body元素的高度设置为100%。这样，您也可以给出body元素百分比高度的直接后代，如下所示：
<head>
<style>
html, body { height: 100% }
body { margin: 0; }
header, footer { height: 10% }
main { height: 80% }
<style>
</head>
<body>
<header>Intro</header>
<main>The Main Stuff</main>
<footer>Additional Details</footer>
</body>
html, body { height: 100% }不再需要在 Chrome 中为直接后代设置百分比高度的声明。但是，它在 Firefox 中仍然是必需的。
这是 2 月初发布的 Chrome 最新更新中的错误吗？或者height现在100%默认设置为？
澄清一下，我不是在问如何实现基于百分比的布局。我更多地询问 Chrome 对body和html元素的默认高度的实现。对于新手开发人员来说，这可能会非常混乱，他们可能会认为html并且body不需要明确定义的高度，如果他们希望 的直接后代body具有基于百分比的高度。
在您提供的代码中，html和body占据页面高度的 100%，因为没有doctype声明。如果没有doctype提供，大多数浏览器将恢复到“怪癖”模式。
如果添加 HTML5 doctype ( <!DOCTYPE html>)，您应该会发现 body 和 html 元素不再占据整个视口而没有明确的高度。