【发布时间】：2021-07-12 03:54:43
【问题描述】：
提前了解：
我一直在寻找解决方案将近一周，并且已经搜索了 StackOverflow 的一半。
我知道有很多同名的问题，但这些并没有让我更进一步。
所以，在评论这是重复之前，请先在我的代码上尝试相应的解决方案。
目标：
我想在页面最后的内容后面添加我的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;
}
}
}
【问题讨论】：