不知怎么的，我的HTML和CSS不能正常工作。我主要怀疑的是跨度。因为它可以在其他页面上运行。
页脚没有检测到任何对象，所以它停留在页面的最顶部。(我也试过把页脚放在<footer>标签上，它仍然显示相同的结果。)
所附图片说明了这种情况。
下面是我的代码片段:.aboutuspagetitle {
width: 100%;
color: rgba(159,74,74,1);
position: absolute;
top: 176px;
left: 660px;
font-family: Merriweather Sans;
font-weight: Bold;
font-size: 40px;
opacity: 1;
}
.aboutuspagedesc {
width: 100%;
color: rgba(0,0,0,1);
position: absolute;
top: 313px;
left: 30px;
font-family: Merriweather Sans;
font-weight: normal;
font-size: 33px;
opacity: 1;
text-align: left;
}
.footer {
clear: both;
position: absolute;
height: 75px;
background-color: #121212;
font-family: Karla Tamil Upright;
color: white;
text-align: center;
left: 0px;
width: 300%;
}
.foot1{
width: 304px;
color: rgba(255,255,255,1);
position: absolute;
top: 0px;
left: 568px;
font-family: Karla Tamil Upright;
font-weight: normal;
font-size: 18px;
opacity: 1;
text-align: center;
}
.foot2{
width: 304px;
color: rgba(255,255,255,1);
position: absolute;
top: 45px;
left: 568px;
font-size: 14px;
opacity: 1;
text-align: center;
}<body>
<span class="aboutuspagetitle">ABOUT US</span>
<span class="aboutuspagedesc">
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut commodo nisl ut justo tincidunt, ac laoreet nunc elementum.</p>
</span>
<div class="footer">
<p class="foot1">THIS IS AN ADDRESS</p>
<a href="https://www.google.com"><span class="foot2">© 2021</span></a>
</div>
</body>你只是忘记添加bottom: 0;到页脚样式。并使用position: fixed;来定位它，这样即使你滚动它也会留在底部。
.aboutuspagetitle {
color: rgba(159,74,74,1);
font-family: Merriweather Sans;
font-weight: Bold;
font-size: 40px;
text-align: center;
}
.aboutuspagedesc {
width: 100%;
color: rgba(0,0,0,1);
font-family: Merriweather Sans;
font-weight: normal;
font-size: 33px;
text-align: left;
padding-bottom: 75px;
}
.footer {
display: flex;
position: fixed;
height: 75px;
background-color: #121212;
font-family: Karla Tamil Upright;
font-weight: normal;
color: white;
text-align: center;
left: 0px;
bottom:0;
width: 100%;
align-items: center;
justify-content: center;
flex-direction: column;
}
.foot1{
color: rgba(255,255,255,1);
font-size: 18px;
margin: 0;
}
.foot2{
color: rgba(255,255,255,1);
font-size: 14px;
}<body>
<h1 class="aboutuspagetitle">ABOUT US</h1>
<span class="aboutuspagedesc">
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut commodo nisl ut justo tincidunt, ac laoreet nunc elementum.</p>
</span>
<footer class="footer">
<p class="foot1">THIS IS AN ADDRESS</p>
<a href="https://www.google.com"><span class="foot2">© 2021</span></a>
</footer>
</body>这里有一些建议。
首先，正如评论中所说的，不要在所有的东西上都使用绝对位置!!当你尝试不同的屏幕尺寸时，一切都会被抵消。
第二，尽量不要在最后添加太多没有任何作用的样式。如果你尝试了一些东西，但它不起作用，把它从样式中删除!