Question

我们假设您希望自己的内容占据视口高度的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以百分比为基础的高度。

Answer 1

在您提供的代码中，html和body占据了网页高度的100％，因为没有doctype声明。大多数浏览器都会回归“怪癖”。如果未提供doctype，则为模式。

如果添加HTML5 doctype（<!DOCTYPE html>），您会发现body和html元素不再占用整个视口而没有明确的高度。

Answer 2

我不知道是否有错误，但为了确保您的元素占据视口高度的100％，您应该使用100vh：

html, body {
  height: 100vh;
}

基于百分比的高度始终相对于直接父级。由于没有<html>的父级，您可以预期它默认为0px的高度。某些浏览器可能会解释如何以不同方式处理<body>的父级，因此对vh标记使用<body>次测量是最安全的。

请注意，您可以在任何元素上使用vh个单元 - 而不仅仅是<html>和<body>！

希望这有帮助！

Chrome主体和html高度默认为100％

2 个答案: