Body 切换到模板后尺寸对高度变化不敏感

Question

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

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

我正在将静态网站移植到使用模板的静态网站生成器。 static-site 生成器是 Eleventy，我使用的是 Nunjucks 模板引擎。对于开发，我使用 Visual Studio 原始版本的实时服务器和 Eleventy 端口的 Browsersync。

在最初的实现中，我的样式效果很好。这张图片显示了我在尝试实现模板后遇到的问题：. I have also added a live version。在导航栏中启用暗模式以查看相同的内容（或检查以查看 html/body 元素未跨越整个高度并且主要元素溢出）。

深色背景是 <html>、<body> 和 <div id="theme-body"> 元素的高度。它应该扩展整个页面的长度（在我最初的实现中也是如此），但它只在我将它插入我的基本模板后占据屏幕的高度，而 <main> 元素（包括我的卡片）超出了 body。 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。我也在使用 bootstrap，这个 pastebin 不包括它。

Answer 1

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

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

Body 切换到模板后尺寸对高度变化不敏感

Body size not responsive to height change after switching to templates

html

css

frontend

templates

eleventy