我已经尝试了一切 - 请帮忙!
我的页面内容重叠在页脚上时遇到问题。我已经为我的页脚设置了额外的媒体查询和 padding-top 以防止这种情况发生，但现在，在我的网站上无缘无故地存在大量空白。
我不知道该怎么做才能解决这个问题。 我的 html 是用
设置的<html>
<head></head>
<body>
<nav></nav>
<div></div>
<footer></footer>
</body></html>
<footer>
<div class="row">
<div class="col" style="margin-left:10px;">
<h1 style="height: 24px;color: rgb(0,43,92);font-family: 'Open Sans', sans-serif;font-weight: bold;font-style: normal;font-size: 20px;">Support</h1>
<h1 style="height: 24px;color: rgb(0,43,92);font-family: 'Open Sans', sans-serif;font-weight: normal;font-style: normal;font-size: 14px;padding-top: 5px;">Call: ______ </h1>
<h1 style="height: 24px;color: rgb(0,43,92);font-family: 'Open Sans', sans-serif;font-weight: normal;font-style: normal;font-size: 14px;padding-top: 5px;">Email: ____.net</h1>
</div>
<div class="col" style="margin-left:10px;">
<h1 style="font-family: 'Open Sans', sans-serif;font-weight: bold;font-style: normal;color: rgb(0,43,92);font-size: 20px;”>_____</h1>
<h1 style="height: 24px;color: rgb(0,43,92);font-family: 'Open Sans', sans-serif;font-weight: normal;font-style: normal;font-size: 14px;padding-top: 5px;">Contact Us!</h1>
<h1 style="height: 24px;color: rgb(0,43,92);font-family: 'Open Sans', sans-serif;font-weight: normal;font-style: normal;font-size: 14px;padding-top: 5px;">Call: ____ 0</h1><img src="assets/img/logo.svg" style="width: 187px;margin: 0px;padding: 8px;padding-left: 0;padding-right: 0;">
<h1 style="height: 24px;color: rgb(0,43,92);font-family: 'Open Sans', sans-serif;font-weight: normal;font-style: normal;font-size: 14px;”>©2019</h1>
</div>
</div>
</footer>
/*phones*/
@media screen and (max-width: 481px){
footer {
margin-top:2500px;
}
}
/*computer screens*/
@media screen and (max-width: 800px){
footer {
margin-top:3000px;
}
}
@media screen and (max-width: 1920px){
footer {
margin-top:1600px;
}
}
footer {
padding-top: 10px;
}
footer h3 {
font-size: 12pt;
}
footer p {
font-size: 9pt;
}
footer ul {
list-style: none;
width: 100px;
}
footer {
width: 100%;
background-color: #C0C0C0;
}
#footerSect {
width: 900px;
margin: auto;
}
footer h3 {
font-size: 12pt;
}
li {
padding-bottom: 15px;
}
footer p {
font-size: 9pt;
}
到目前为止，如果我不在我的 css 中添加 margin-top，我的内容/图片/文本会与页脚的内容重叠，然后一切都无法辨认。这也特定于移动 View - 它在计算机显示器或更大的屏幕上看起来很好。
最佳答案
这应该能让你摆脱困境!
footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: red; /* or whatever */
width: 100%; /* or whatever */
}
https://jsfiddle.net/3tkphvzc/
如果您发现顶部内容仍然重叠，您可以添加一个偷偷摸摸的 margin-top: 10000px 或其他内容
关于html - 将页脚保持在页面底部的技巧？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58021864/