DOCTYPE的意外布局[重复]答案

【问题标题】：unexpected layout with DOCTYPE [duplicate]DOCTYPE的意外布局[重复]
【发布时间】：2017-10-02 15:22:28
【问题描述】：

我有一个奇怪的行为，我无法解释：当我将行 <!DOCTYPE html> 放在代码的开头时，我的页面的滚动条没有像预期的那样围绕标签“main”。如果我删除这第一行，我有预期的行为。这是为什么？我的错误是什么？

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0">
    <title>Off Track</title>
  </head>

  <body style="margin: 0px; padding:0px;">
    <header style="background:green; width:100%; height: 50px;">
    </header>
    <main style="background:red; width:100%; height:calc(100% - 70px); overflow-y: auto">
      bla bla <br>    bla bla <br>    bla bla <br>    bla bla <br>    bla bla <br>
      bla bla <br>    bla bla <br>    bla bla <br>    bla bla <br>    bla bla <br>
      bla bla <br>    bla bla <br>    bla bla <br>    bla bla <br>    bla bla <br>
      bla bla <br>    bla bla <br>    bla bla <br>    bla bla <br>    bla bla <br>
      bla bla <br>    bla bla <br>    bla bla <br>    bla bla <br>    bla bla <br>
      bla bla <br>    bla bla <br>    bla bla <br>    bla bla <br>    bla bla <br>
      bla bla <br>    bla bla <br>    bla bla <br>    bla bla <br>    bla bla <br>
      bla bla <br>    bla bla <br>    bla bla <br>    bla bla <br>    bla bla <br>
      bla bla <br>    bla bla <br>    bla bla <br>    bla bla <br>    bla bla <br>
    </main>
    <footer style="background: yellow; width:100%; height:20px;">
    </footer>
  </body>

</html>

注意：如果我将height:calc(100% - 70px) 替换为height:calc(100vh - 70px)，我也会有预期的行为，但我想避免使用vh。

【问题讨论】：

这里有两个不同的问题（“100% 不工作”和“不同文档类型的不同渲染”）。两个副本（链接）分别涵盖每个问题。
如果你知道，你只需要一个html标签并保持特定的高度，这应该可以解决你的问题

标签： html css scroll doctype

【解决方案1】：

<!DOCTYPE html> 行与它无关。

要仅在 main 元素上获得滚动条，您需要为其父元素 body 和 html 设置 height: 100%：

<!DOCTYPE html>

<html lang="en" style="height: 100%;">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0">
    <title>Off Track</title>
  </head>

  <body style="margin: 0px; padding:0px; height: 100%;">
    <header style="background:green; width:100%; height: 50px;">
    </header>
    <main style="background:red; width:100%; height:calc(100% - 70px); overflow-y: auto">
      bla bla <br>    bla bla <br>    bla bla <br>    bla bla <br>    bla bla <br>
      bla bla <br>    bla bla <br>    bla bla <br>    bla bla <br>    bla bla <br>
      bla bla <br>    bla bla <br>    bla bla <br>    bla bla <br>    bla bla <br>
      bla bla <br>    bla bla <br>    bla bla <br>    bla bla <br>    bla bla <br>
      bla bla <br>    bla bla <br>    bla bla <br>    bla bla <br>    bla bla <br>
      bla bla <br>    bla bla <br>    bla bla <br>    bla bla <br>    bla bla <br>
      bla bla <br>    bla bla <br>    bla bla <br>    bla bla <br>    bla bla <br>
      bla bla <br>    bla bla <br>    bla bla <br>    bla bla <br>    bla bla <br>
      bla bla <br>    bla bla <br>    bla bla <br>    bla bla <br>    bla bla <br>
    </main>
    <footer style="background: yellow; width:100%; height:20px;">
    </footer>
  </body>

</html>

【讨论】：

我投反对票的原因是什么——你有没有看过代码和结果？
我不是反对你的人...你的解决方案对我有用，谢谢！
说“ 行与它无关。”有点牵强。如果没有到位，怪癖模式将导致 body 是视口的 100% 高，因此设置 height: 100% 到 html 和 body 元素是不必要的。见the quirks mode standard, points 3.6 and 3.7
那么为什么没有明显的效果，为什么在为 html 和 body 添加 100% 高度时它会起作用？
它确实有效。 “如果我删除第一行，我就会有预期的行为。”删除线会导致怪癖模式。