屏幕中央的页脚

huangapple go评论65阅读模式
英文:

Footer in middle of screen

问题

以下是您要翻译的内容:

"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!

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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

<!-- language: lang-html -->

&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;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年2月16日 03:29:13
  • 转载请务必保留本文链接:https://go.coder-hub.com/75464603.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定