页脚在网页的最后（在内容之后）

Question

提前信息：
我已经找了将近一个星期的解决方案，并且已经搜索了一半的 Whosebug。
我知道有很多相同标题的问题，但是这些并没有给我带来更多的问题。
因此，在评论这是重复之前，请先在我的代码上尝试相应的解决方案。

目标：
我想在页面末尾添加我的footer内容。

问题：
到目前为止我尝试过的想法do not work properly。内容要么永久显示在屏幕边缘，无论您身在何处（可以说 sticky footer），要么页脚位于 middle of the content.

代码（HTML & SCSS）：

<html>
      <head>
            <link id="theme" rel="stylesheet" href="style.css" type="text/css" />
            <title>Some page with footer</title>
      </head>
      <body>
            <!-- Navigation - Don't worry, the navigation stylesheet isn't included-->
            <div class="navigation">
                  <input id="burger" type="checkbox" />
                  <label for="burger">
                        <span></span>
                        <span></span>
                  </label>
                  <nav>    
                        <div class="logo">
                        </div>
                        <ul>
                            <li><a href="">Some navigation</a></li>
                            <li><a href="">Some content</a></li>
                        </ul>  
                  </nav>
                  <div class="icons">
                  </div>
            </div>
            <!-- Content -->
            <main>
                  <div class="content">
                        <h2 id="faq">FAQ</h2>
                              <p>Some content here:
                              <br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
                              <br>Consectetur repellendus quia ab, voluptates tempore ipsam nemo?
                              <br>Ipsum mollitia odio maiores nisi dignissimos, temporibus magnam impedit est optio voluptate sit laboriosam?
                              <br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
                              <br>Illum suscipit nobis, explicabo ducimus voluptates laudantium pariatur eius delectus repudiandae?
                              <br>Iure eaque sit quisquam itaque ducimus nam voluptates debitis nihil eligendi?
                              <br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
                              <br>Consectetur repellendus quia ab, voluptates tempore ipsam nemo?
                              <br>Ipsum mollitia odio maiores nisi dignissimos, temporibus magnam impedit est optio voluptate sit laboriosam?
                              <br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
                              <br>Illum suscipit nobis, explicabo ducimus voluptates laudantium pariatur eius delectus repudiandae?
                              <br>Iure eaque sit quisquam itaque ducimus nam voluptates debitis nihil eligendi?
                              <br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
                              <br>Consectetur repellendus quia ab, voluptates tempore ipsam nemo?
                              <br>Ipsum mollitia odio maiores nisi dignissimos, temporibus magnam impedit est optio voluptate sit laboriosam?
                              <br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
                              <br>Illum suscipit nobis, explicabo ducimus voluptates laudantium pariatur eius delectus repudiandae?
                              <br>Iure eaque sit quisquam itaque ducimus nam voluptates debitis nihil eligendi?
                              <br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
                              <br>Consectetur repellendus quia ab, voluptates tempore ipsam nemo?
                              <br>Ipsum mollitia odio maiores nisi dignissimos, temporibus magnam impedit est optio voluptate sit laboriosam?
                              <br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
                              <br>Illum suscipit nobis, explicabo ducimus voluptates laudantium pariatur eius delectus repudiandae?
                              <br>Iure eaque sit quisquam itaque ducimus nam voluptates debitis nihil eligendi?
                              <br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
                              <br>Consectetur repellendus quia ab, voluptates tempore ipsam nemo?
                              <br>Ipsum mollitia odio maiores nisi dignissimos, temporibus magnam impedit est optio voluptate sit laboriosam?
                              <br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
                              <br>Illum suscipit nobis, explicabo ducimus voluptates laudantium pariatur eius delectus repudiandae?
                              <br>Iure eaque sit quisquam itaque ducimus nam voluptates debitis nihil eligendi?
                              <br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
                              </p>
                              <br>
                  </div>
            </main>
            <!-- Footer -->
            <footer>
                  <ul>
                        <li>@ Copyright 2021 by some guy</li>
                        <li>This is not the final website.</li>
                        <li>Contact</li>
                        <li>AGB/TERMS</li>
                        <li>LEGAL</li>
                  </ul>
            </footer>
      </body>
</html>

body {
  main {
    position: absolute;
    top: 15vh;
    bottom: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;

    line-height: 40px;
    text-align: center;
    width: 90%;
    h2 {
      position: relative;
      font-family: 'Times New Roman', Times, serif ;
      font-size: 2.7vh;
      text-align: center;
    }
    p {
      position: relative;
      font-family: 'Gill Sans', 'Gill Sans MT', sans-serif;
      font-size: 1.5vh;
      text-align: center;
    }
  }
  footer {
    position: absolute;     // Footer is inside the content
    left: 0;
    top: 100vh;
    bottom: 0;
    width: 100%;
    height: 60px;
    text-align: center;
    background-color: red;
    ul li {
      display: inline;
    }
  }
}

Answer 1

WordPress 主题开发人员总是面临这个问题。一种方法是为您的“主要”元素提供

样式

height:100vh;

这样它就可以将页脚推到页面底部，而无需承受

的压力

position:absolute;

Answer 2

我认为这可能对您有所帮助

body {
  margin: 0;
  padding: 0;
}

.content {
  top: 15vh;
  bottom: 0;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  line-height: 40px;
  text-align: center;
  width: 90%;
}

h2 {
  position: relative;
  font-family: 'Times New Roman', Times, serif;
  font-size: 2.7vh;
  text-align: center;
}

p {
  position: relative;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: 1.5vh;
  text-align: center;
}

footer {
  left: 0;
  margin: 0;
  padding: 0;
  height: 60px;
  text-align: center;
  background-color: red;
  padding: 0;
}

ul, li {
  display: inline;
}

<html lang="en">

<head>
  <link id="theme" rel="stylesheet" href="style.css" type="text/css" />
  <title>Some page with footer</title>
</head>

<body>
  <!-- Navigation - Don't worry, the navigation stylesheet isn't included-->
  <div class="navigation">
    <input id="burger" type="checkbox" />
    <label for="burger">
        <span></span>
        <span></span>
      </label>
    <nav>
      <div class="logo">
      </div>
      <ul>
        <li><a href="">Some navigation</a></li>
        <li><a href="">Some content</a></li>
      </ul>
    </nav>
    <div class="icons">
    </div>
  </div>
  <!-- Content -->
  <main>
    <div class="content">
      <h2 id="faq">FAQ</h2>
      <p>Some content here:

        <br>Ipsum mollitia odio maiores nisi dignissimos, temporibus magnam impedit est optio voluptate sit laboriosam?
        <br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
        <br>Illum suscipit nobis, explicabo ducimus voluptates laudantium pariatur eius delectus repudiandae?
        <br>Iure eaque sit quisquam itaque ducimus nam voluptates debitis nihil eligendi?
        <br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
        <br>Consectetur repellendus quia ab, voluptates tempore ipsam nemo?
        <br>Ipsum mollitia odio maiores nisi dignissimos, temporibus magnam impedit est optio voluptate sit laboriosam?
        <br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
        <br>Illum suscipit nobis, explicabo ducimus voluptates laudantium pariatur eius delectus repudiandae?
        <br>Iure eaque sit quisquam itaque ducimus nam voluptates debitis nihil eligendi?
        <br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
        <br>Consectetur repellendus quia ab, voluptates tempore ipsam nemo?
        <br>Ipsum mollitia odio maiores nisi dignissimos, temporibus magnam impedit est optio voluptate sit laboriosam?
        <br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
        <br>Illum suscipit nobis, explicabo ducimus voluptates laudantium pariatur eius delectus repudiandae?
        <br>Iure eaque sit quisquam itaque ducimus nam voluptates debitis nihil eligendi?
        <br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
        <br>Consectetur repellendus quia ab, voluptates tempore ipsam nemo?
        <br>Ipsum mollitia odio maiores nisi dignissimos, temporibus magnam impedit est optio voluptate sit laboriosam?
        <br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
        <br>Illum suscipit nobis, explicabo ducimus voluptates laudantium pariatur eius delectus repudiandae?
        <br>Iure eaque sit quisquam itaque ducimus nam voluptates debitis nihil eligendi?
        <br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
      </p>
      <br>
    </div>
  </main>
  <!-- Footer -->
  <footer>
    <ul>
      <li>@ Copyright 2021 by some guy</li>
      <li>This is not the final website.</li>
      <li>Contact</li>
      <li>AGB/TERMS</li>
      <li>LEGAL</li>
    </ul>
  </footer>
</body>

</html>

页脚在网页的最后（在内容之后）

Footer at the very end of the web page (after the content)

html

css

sass

footer