网页Footer显示在屏幕中间的异常问题求助

我的网页里的 footer 元素突然跑到屏幕中间，夹在所有内容之间，但同样的 footer 代码在其他页面完全正常。试过网上各种方案都没用，求排查思路。相关代码如下：

CSS 代码 #

.footer {
  width: 100%;
  height: 30vh;
  background-color: #bbbbbb;
}

.footer button {
  background-color: #dddddd;
  border: 0.15vw solid #999;
  border-radius: 0.3vw;
  text-align: center;
  padding: 0.25vw 0.5vw;
  font-size: 1.5vw;
}

.footer p {
  padding-top: 2vw;
  text-align: center;
}

.footer ul {
  padding-left: 0;
  text-align: center;
  list-style: none;
}

HTML 代码 #

<link href="https://fonts.cdnfonts.com/css/handel-gothic-d" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<header>
  <nav>
    <!--navigation menu-->
    <a href="index.html"> Home</a>
    <a href="making_off.html"> Making off </a>
    <!--different links-->
    <a href="plot.html"> Plot </a>
    <a href="characters.html"> Characters</a>
    <a href="credits.html"> Credits </a>
  </nav>
</header>
<div class="wallpaper">
  <p class="wallpaper-text">WALL&#x2022;E</p>
</div>
<article id="homepage-intro">
  <h1><strong> Wall-E Fan page </strong></h1>
  <p>
    Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst
    Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst
    Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst
    Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst
    Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst
    Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst
    Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst
  </p>
</article>
<article class="page-content-index">
  <h3>Making off</h3>
  <p>
    Welcome to our web page about Pixar's, and maybe the world's, best ever movie, Wall-E. <br /> On here we will have a deep dive about the making off, the crew behind Wall-E, what the movie is about and we break down the most important characters. To
    get you warmed up, we have given some fun facts about Wall-E and its creator. To get started:
  </p>
  <p>
    Go to:
    <button onclick="window.location.href='making_off.html';" id="Home-page-button">
          Making off
        </button>
  </p>
  <h3>Plot</h3>
  <p>
    Welcome to our web page about Pixar's, and maybe the world's, best ever movie, Wall-E. <br /> On here we will have a deep dive about the making off, the crew behind Wall-E, what the movie is about and we break down the most important characters. To
    get you warmed up, we have given some fun facts about Wall-E and its creator. To get started:
  </p>
  <p>
    Go to:
    <button onclick="window.location.href='plot.html';" id="Home-page-button">
          Plot
        </button>
  </p>
  <h3>Characters</h3>
  <p>
    Welcome to our web page about Pixar's, and maybe the world's, best ever movie, Wall-E. <br /> On here we will have a deep dive about the making off, the crew behind Wall-E, what the movie is about and we break down the most important characters. To
    get you warmed up, we have given some fun facts about Wall-E and its creator. To get started:
  </p>
  <p>
    Go to:
    <button onclick="window.location.href='characters.html';" id="Home-page-button">
          Characters
        </button>
  </p>
  <h3>Credits</h3>
  <p>
    Welcome to our web page about Pixar's, and maybe the world's, best ever movie, Wall-E. <br /> On here we will have a deep dive about the making off, the crew behind Wall-E, what the movie is about and we break down the most important characters. To
    get you warmed up, we have given some fun facts about Wall-E and its creator. To get started:
  </p>
  <p>
    Go to:
    <button onclick="window.location.href='credits.html';" id="Home-page-button">
          Credits
        </button>
  </p>
</article>
<aside id="Fun-fact">
  <h2><b>Fun facts</b></h2>
  <ul>
    <li>
      Wall-E, the name of the main character of the movie, stands for Waste Allocation Load Lifter: Earth class.
    </li>
    <li>
      Wall-E was the first instance of Pixar using live-action to create a feature-length film.
    </li>
    <li>
      At the 20 minute mark, a pizza delivery truck which also appeared in Toy Story can be spotted.
    </li>
    <li>
      To learn about pure visual storytelling, Andrew Stanton, the director of Wall-E, watched every single movie of Charlie Chaplin.
    </li>
    <li>
      The font used for the navigation bar at the top of this page is the same font that was used in the Wall-E posters.
    </li>
  </ul>
  <p>
    <i> Source: </i>
    <a href="https://m.imdb.com/title/tt0910970/trivia/?ref_=tt_ql_trv">
          Imdb.com</a
        >
      </p>
    </aside>
    <footer class="footer">
      <p>
        Next page:
        <button onclick="window.location.href='plot.html';">Plot</button
        ><br /><br />Made by:
      </p>
      <ul>
        <li>Bart de Roos</li>
        <li>Quinten Nijsen</li>
        <li>Walter Hooijmans</li>
      </ul>
    </footer>

• 检查前置元素的浮动/定位问题：看看 footer 前面的 aside#Fun-fact、article.page-content-index 有没有设置 float 未清除，或者用了 position: absolute/fixed 脱离文档流。可以给 footer 临时加 clear: both 测试，或者查看前置元素的定位属性。
• 排查当前页面独有的 CSS 冲突：打开浏览器开发者工具，选中 footer 元素，查看右侧「样式」面板里的所有生效规则，确认有没有被当前页面的其他全局样式（比如针对 footer 标签的全局选择器、父容器的 flex/grid 布局）覆盖。
• 验证 HTML 结构完整性：检查当前页面的 HTML 有没有未闭合的标签（比如某个 <div>、<article> 没闭合），导致 footer 被错误嵌套到前面的元素中。可以用开发者工具的「元素」面板展开 DOM 树，确认 footer 的层级是否正确。
• 调整页面高度与布局规则：如果页面内容高度不足，或者 html/body 没设置 min-height: 100vh，可能导致 footer 无法推到底部。试试添加以下 CSS：

  html, body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  .page-content-index, #homepage-intro, aside {
    flex: 1;
  }
  

  用 flex 布局让内容区占满剩余空间，footer 自然会固定在底部。
• 清除浏览器缓存并对比正常页面：强制刷新页面（Ctrl+F5）排除缓存影响；同时打开正常页面，对比两个页面中 footer 元素的 DOM 结构、继承样式，找出差异点。

内容的提问来源于stack exchange，提问作者Walrus