我知道有类似问题的重复，但我不能让我的页脚停留在底部，我尝试了多个建议的修复程序。请告诉我如何将页脚移动到页面底部。它与身体有关吗？无论谁发布解决方案，你能说出这是不正确的吗？
<head>
<meta charset="utf-8">
<title>CopperMug</title>
<link href="Coppermug Stylesheet.css" rel="stylesheet" type="text/css">
</head>
<div class="navbar" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</div>
<body id="body">
<div>
<img src="../Final Logo Assets/Coppermug banner no background 2-min.png" class="img" id="logo">
</div>
</body>
<footer>
<a class="service-link" href="#">Privacy Policy</a>
<a class="service-link" href="#">Terms of Service</a>
</footer>
</html>
@charset "utf-8";
/* CSS Document */
html {
background-image: url("../Final Logo Assets/Blur Mug-min Opacity-min.jpg");
background-repeat: no-repeat;
background-size: cover;
}
#body {
}
#header,
li .nav-link {
font-family: "Copperplate Gothic";
color: #000000
}
#logo { display: block;
margin-left: 26%;
margin-right: auto;
margin-top: 12%;
width: 50%;}
#navbarSupportedContent {
color: black;
font-family: "Copperplate Gothic";
font-size: .99em;
padding: 1em;
}
#navbarSupportedContent li {
list-style-type: none;
display: inline-block;
}
div #navbarSupportedContent {
width: 100%;
}
.navbar {
text-align: center;
position: relative;
font-size: 150%;
margin-left: 3%;
}
.navbar-nav {
text-align: center;
position: relative;
font-size: 150%;
}
footer .service-link {
color: #000000;
}
footer {
text-align: center;
clear: both;
position: relative;
height: 40px;
margin-top: -40px;
}
你目前所拥有的是一个页脚元素，它作为页面流中的另一个普通元素存在（仅供参考，你有一个冗余的position:relative），所以它最终会在它上面的内容结束的地方（即你的图像）。
如果你想要一个页脚撞到视口的底部，无论内容长度或滚动位置如何都始终可见，那么你就会在你的页脚上使用position: fixed，就像crodev的答案所示。然而，这占用了屏幕空间并且有意图和充分理由使用（就像在某种有趣的用户体验期间的某些操作栏）。
但是，对于常规页面情况，当您有短内容并希望页脚出现在视口底部时，最好使用如下所示的flex布局（这也提供了各种优势）：
body {
height: 100vh;
margin: 0;
}
#container {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
#header {
background-color: red;
min-height: 100px;
}
#content {
flex: 1;
background-color: green;
/* to test a longer page */
/* min-height: 3000px; */
}
#footer {
background-color: blue;
min-height: 100px;
}
.section {
padding: 1em;
display: flex;
justify-content: center;
align-items: center;
}<div id="container">
<div id="header" class="section">
header
</div>
<div id="content" class="section">
content
</div>
<div id="footer" class="section">
footer
</div>
</div>HTML：
<div class="footer">
<p>Footer</p>
</div>
CSS：
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: transparent;
color: white;
text-align: center;
}