问题

以下是您要翻译的内容：

"For some reason my footer is appearing in the middle of my screen in between all of my content. I have the exact code for my footer on other pages and it works fine there. Does anyone have any idea why?"

"I already tried a lot on the internet, but the footer just will not stay in the right place."

.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>
    <!-- 导航菜单 -->
    <a href="index.html"> Home</a>
    <a href="making_off.html"> Making off </a>
    <!-- 不同的链接 -->
    <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•E</p>
</div>
<article id="homepage-intro">
  <h1><strong> Wall-E Fan page </strong></h1>
  <p>
    文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
    文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
    文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
    文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
    文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
    文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
    文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
    文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
    文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
    文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
    文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
    文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
  </p>
</article>
<article class="page-content-index">
  <h3>Making off</h3>
  <p>
    欢迎访问我们关于 Pixar 的、也许是世界上最好的电影 Wall-E 的网页。在这里，我们将深入探讨制作背后的故事，Wall-E 制作团队，电影内容以及分解最重要的角色。为了让你热身，我们提供了一些关于 Wall-E 及其创作者的有趣事实。开始吧：
  </p>
  <p>
    前往：
    <button onclick="window.location.href='making_off.html';" id="Home-page-button">
      制作背后
    </button>
  </p>


<details>
<summary>英文:</summary>

For some reason my footer is appearing in the middle of my screen in between all of my content. I have the exact code for my footer on other pages and it works fine there. Does anyone have any idea why? 


I already tried a lot on the internet, but the footer just will not stay in the right place.

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    .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;
    }

&lt;!-- language: lang-html --&gt;

    &lt;link href=&quot;https://fonts.cdnfonts.com/css/handel-gothic-d&quot; rel=&quot;stylesheet&quot; /&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;

    &lt;header&gt;
      &lt;nav&gt;
        &lt;!--navigation menu--&gt;
        &lt;a href=&quot;index.html&quot;&gt; Home&lt;/a&gt;
        &lt;a href=&quot;making_off.html&quot;&gt; Making off &lt;/a&gt;
        &lt;!--different links--&gt;
        &lt;a href=&quot;plot.html&quot;&gt; Plot &lt;/a&gt;
        &lt;a href=&quot;characters.html&quot;&gt; Characters&lt;/a&gt;
        &lt;a href=&quot;credits.html&quot;&gt; Credits &lt;/a&gt;
      &lt;/nav&gt;
    &lt;/header&gt;
    &lt;div class=&quot;wallpaper&quot;&gt;
      &lt;p class=&quot;wallpaper-text&quot;&gt;WALL&amp;#x2022;E&lt;/p&gt;
    &lt;/div&gt;
    &lt;article id=&quot;homepage-intro&quot;&gt;
      &lt;h1&gt;&lt;strong&gt; Wall-E Fan page &lt;/strong&gt;&lt;/h1&gt;
      &lt;p&gt;
        Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst
        Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst
        Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst
        Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst
        Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst
        Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst
        Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst
      &lt;/p&gt;
    &lt;/article&gt;
    &lt;article class=&quot;page-content-index&quot;&gt;
      &lt;h3&gt;Making off&lt;/h3&gt;
      &lt;p&gt;
        Welcome to our web page about Pixar&#39;s, and maybe the world&#39;s, best ever movie, Wall-E. &lt;br /&gt; 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:
      &lt;/p&gt;
      &lt;p&gt;
        Go to:
        &lt;button onclick=&quot;window.location.href=&#39;making_off.html&#39;;&quot; id=&quot;Home-page-button&quot;&gt;
              Making off
            &lt;/button&gt;
      &lt;/p&gt;
      &lt;h3&gt;Plot&lt;/h3&gt;
      &lt;p&gt;
        Welcome to our web page about Pixar&#39;s, and maybe the world&#39;s, best ever movie, Wall-E. &lt;br /&gt; 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:
      &lt;/p&gt;
      &lt;p&gt;
        Go to:
        &lt;button onclick=&quot;window.location.href=&#39;plot.html&#39;;&quot; id=&quot;Home-page-button&quot;&gt;
              Plot
            &lt;/button&gt;
      &lt;/p&gt;
      &lt;h3&gt;Characters&lt;/h3&gt;
      &lt;p&gt;
        Welcome to our web page about Pixar&#39;s, and maybe the world&#39;s, best ever movie, Wall-E. &lt;br /&gt; 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:
      &lt;/p&gt;
      &lt;p&gt;
        Go to:
        &lt;button onclick=&quot;window.location.href=&#39;characters.html&#39;;&quot; id=&quot;Home-page-button&quot;&gt;
              Characters
            &lt;/button&gt;
      &lt;/p&gt;
      &lt;h3&gt;Credits&lt;/h3&gt;
      &lt;p&gt;
        Welcome to our web page about Pixar&#39;s, and maybe the world&#39;s, best ever movie, Wall-E. &lt;br /&gt; 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:
      &lt;/p&gt;
      &lt;p&gt;
        Go to:
        &lt;button onclick=&quot;window.location.href=&#39;credits.html&#39;;&quot; id=&quot;Home-page-button&quot;&gt;
              Credits
            &lt;/button&gt;
      &lt;/p&gt;
    &lt;/article&gt;
    &lt;aside id=&quot;Fun-fact&quot;&gt;
      &lt;h2&gt;&lt;b&gt;Fun facts&lt;/b&gt;&lt;/h2&gt;
      &lt;ul&gt;
        &lt;li&gt;
          Wall-E, the name of the main character of the movie, stands for Waste Allocation Load Lifter: Earth class.
        &lt;/li&gt;
        &lt;li&gt;
          Wall-E was the first instance of Pixar using live-action to create a feature-length film.
        &lt;/li&gt;
        &lt;li&gt;
          At the 20 minute mark, a pizza delivery truck which also appeared in Toy Story can be spotted.
        &lt;/li&gt;
        &lt;li&gt;
          To learn about pure visual storytelling, Andrew Stanton, the director of Wall-E, watched every single movie of Charlie Chaplin.
        &lt;/li&gt;
        &lt;li&gt;
          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.
        &lt;/li&gt;
      &lt;/ul&gt;
      &lt;p&gt;
        &lt;i&gt; Source: &lt;/i&gt;
        &lt;a href=&quot;https://m.imdb.com/title/tt0910970/trivia/?ref_=tt_ql_trv&quot;&gt;
              Imdb.com&lt;/a
            &gt;
          &lt;/p&gt;
        &lt;/aside&gt;
        &lt;footer class=&quot;footer&quot;&gt;
          &lt;p&gt;
            Next page:
            &lt;button onclick=&quot;window.location.href=&#39;plot.html&#39;;&quot;&gt;Plot&lt;/button
            &gt;&lt;br /&gt;&lt;br /&gt;Made by:
          &lt;/p&gt;
          &lt;ul&gt;
            &lt;li&gt;Bart de Roos&lt;/li&gt;
            &lt;li&gt;Quinten Nijsen&lt;/li&gt;
            &lt;li&gt;Walter Hooijmans&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/footer&gt;

&lt;!-- end snippet --&gt;



</details>


# 答案1
**得分**: 0

在 footer 标签中添加 `height: 30vh` 和 `background-color: #bbbbbb` 会告诉你的网站，你希望背景颜色只占其容器空间的 30%。

让我们在 footer 内部添加一个实际的容器，并使用内边距来创建间距。

希望这有所帮助！

```css
.footer .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #bbbbbb;
  padding: 2rem;
}

<footer class="footer">
  <div class="container">
    <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>沃尔特·胡伊曼斯</li>
    </ul>
  </div>
</footer>

英文:

Adding height: 30vh on the footer tag along with background-color: #bbbbbb is telling your website that you want that background color to only take up 30% of its container space.

Lets add an actual container inside your footer and use padding instead of height to give it space.

Hope this helps!

.footer .container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #bbbbbb;
padding: 2rem;
}

&lt;footer class=&quot;footer&quot;&gt;
&lt;div class=&quot;container&quot;&gt;
&lt;p&gt;
Next page:
&lt;button onclick=&quot;window.location.href=&#39;plot.html&#39;;&quot;&gt;Plot&lt;/button
&gt;&lt;br /&gt;&lt;br /&gt;Made by:
&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Bart de Roos&lt;/li&gt;
&lt;li&gt;Quinten Nijsen&lt;/li&gt;
&lt;li&gt;Walter Hooijmans&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/footer&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

屏幕中央的页脚

问题

How do I limit height of some divs to other divs in the same parent div with display flex row?

CSS居中宽度样式在Vaadin主题中 – Java

从嵌套数组中筛选出元素

如何在JavaScript中循环嵌套数组并将其部分添加到具有相同ID的不同div中

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论