css - 网页不会使用 Pug/W3.CSS 滚动

Question

我正在构建一个 Web 应用程序来测试 Node.js、Express.js、Pug 和 W3.CSS。我为我的主页使用了一个非常简单的模板，具有两个按钮和一个水平/垂直居中的 h1。也就是说，这个主页不需要滚动，因为内容是固定的。但是，我正在尝试为从 POST 请求返回多个结果的页面创建 HTML/CSS。最终我将添加分页，但现在，我无法让内容可滚动。我的 POST 请求返回五个结果，但只显示最后 3 个。作为参考，这里是 Pug 文件（请记住，我使用 Pug 作为模板/视图引擎和页面上所有组件的 W3.CSS 类）：

doctype html
title RecipeTin
meta(charset='UTF-8')
meta(name='viewport' content='width=device-width, initial-scale=1')
link(rel='stylesheet' href='https://www.w3schools.com/w3css/4/w3.css')
link(rel='stylesheet' href='https://fonts.googleapis.com/css?family=Raleway')
link(rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css')
script(src='/scripts.js')
style.
  body,h1,h5 {font-family: "Raleway", sans-serif}
  body, html {height: 100%}
  .bgimg {
  background-image: url('/images/background.png');
  min-height: 100%;
  background-position: center;
  background-size: auto;
  }
  .w3-card-4 {
  background-color: black;
  text-align: center;
  }
  p {
  padding: 10px;
  }
.bgimg.w3-display-container.w3-text-white
  .w3-display-container
    .w3-display-middle
      each recipe in recipes
        .w3-card-4
          h1= recipe.recipeName
          hr.rounded
          p Ingredients...
          hr.rounded
          p Method...

标签： cssnode.jsexpresspugw3.css