0

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

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

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

在最初的实现中，我的样式工作正常。这张照片显示了我尝试实现模板后的问题：体型不敏感. 我还添加了一个现场版本。在导航栏中启用暗模式以查看相同的内容（或检查以查看 html/body 元素未跨越整个高度并且主元素溢出）。

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

我预计问题是因为我没有完全理解如何订购 css 声明和模板。高度似乎是在插入内容之前设置的，但我看不到解决方法。即便如此，我认为它仍然应该响应变化。

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

基地.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%，最小高度为 100%，并且它始终将 100% 视为屏幕高度。这个 SO 答案中的任何建议都没有帮助，他们无法解释为什么他们以前会工作，但现在不行。

此外，这是 pastebin 中的一些 css。我也在使用 bootstrap，这个 pastebin 不包括。

4

1 回答 1

0

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

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

于 2020-09-06T03:15:20.137 回答