切换到模板后，车身尺寸对身高变化无反应

问题描述

已解决：在生成的文件的开头加入<!DOCTYPE html>。

不知道为什么，但是我可以将其包含在基本模板中，但不会显示在生成的html文件中。但是，如果我在浏览器中进行检查，它就可以解决问题。

我正在将静态网站移植到使用模板的静态网站生成器。静态站点生成器是Eleventy，我正在使用Nunjucks模板引擎。为了进行开发，我将Visual Studio live服务器用于原始版本，将browsersync用于Eleventy端口。

在原始实现中，我的样式工作正常。这张图片显示了我尝试实施模板后的问题：

。我还添加了a live version。在导航栏中启用暗模式，可以看到相同的内容（或检查html / body元素没有覆盖整个高度，并且main元素溢出）。

深色背景是<html>，<body>和<div id="theme-body">元素的高度。它应该扩展页面的整个长度（并且在我的原始实现中也是如此），但是只有在将其插入到基本模板中之后，它才会占据屏幕的高度，而<main>元素（包括我的卡片）延伸到身体之外。 css与工作版本相同。

我预计该问题是由于我不完全了解如何订购CSS声明和模板的结果。高度似乎是在插入内容之前设置的，但是我看不到解决方法。甚至，我仍然认为它仍然应该对更改做出响应。

我已经建立了一个基本模板，其中包括我的所有元数据，导航，样式和页脚。然后，将索引页（带卡片的登录页面）插入导航和页脚之间的基本模板中。这是我的基本模板的简化版本：

base.njk

<html lang="en">
  <head>
    ...
    <!-- Style -->
    <link rel="stylesheet" type="text/css" href="/css/main.css">
    ...
  </head>
  <body>
    <input type="checkBox" id="theme-switch">
    <div id="theme-body">
      <header>
        <!-- Navigation -->
        ...
      </header>

      <!--CONTENT -->
      {{ content | safe }}

      <!-- Footer -->
      <footer class="page-footer">
        ...
      </footer>
    </div>
  </body>

  <!-- Bootstrap requirements: jquery,popper,bootstrap js plugins -->
  ...
  <script src="/js/main.js"></script>
</html>

内容（在本例中为我的首页-硬编码HTML）填充在{{ content | safe }}部分中。在生成的页面中，HTML结构与原始页面相同。

我尝试将html和body的高度设置为100％，在所有可能的位置将min-height设置为100％，并且它始终将100％设置为屏幕高度。 None of the suggestions in this SO answer helped,，他们无法解释为什么会以前但现在不能工作。

此外，here is some css in a pastebin。我也在使用引导程序，该pastebin不包含该程序。

解决方法

通过在生成的文件的开头包含<!DOCTYPE html>来解决。

不知道为什么，但是我可以将其包含在基本模板中，但不会显示在生成的html文件中。但是，如果我在浏览器中进行检查，它就在那里并解决了问题。

eleventy frontend html templates