问题描述
已解决：在生成的文件的开头加入<!DOCTYPE html>。
不知道为什么，但是我可以将其包含在基本模板中，但不会显示在生成的html文件中。但是，如果我在浏览器中进行检查，它就可以解决问题。
我正在将静态网站移植到使用模板的静态网站生成器。静态站点生成器是Eleventy，我正在使用Nunjucks模板引擎。为了进行开发，我将Visual Studio live服务器用于原始版本，将browsersync用于Eleventy端口。
在原始实现中，我的样式工作正常。这张图片显示了我尝试实施模板后的问题： 
深色背景是<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文件中。但是，如果我在浏览器中进行检查，它就在那里并解决了问题。