将页脚保持在页面最底部的提示？
[英]Tips for keeping the footer at the very bottom of the page?
问题描述
我已经尝试了一切 - 请帮助！
我的页脚内容重叠时遇到问题。 我已经为我的页脚设置了额外的媒体查询和 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，我的内容/图片/文本与页脚的内容重叠，然后就没有什么是清晰的了。 这也是特定于移动视图的 - 它在计算机显示器或更大的屏幕上看起来很好。
2 个解决方案
解决方案1
2 2019-09-20 04:48:22
这应该能让你摆脱困境！
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或其他
解决方案2
1 已采纳 2019-09-20 06:02:55
如果您想将页脚保持在一个位置，我建议您使用 position 固定。 做类似的事情： -
footer { position: fixed; left: 0; bottom: 0; height: 60px; width: 100%; }
然后对于上面的 div，使用的边距底部大于您为页脚设置的高度，例如：- 70px。 这样您的内容将永远不会重叠。
另一种方法是使用 calc 并从容器主体中减去页脚的高度，如下所示：
.container { width: 100%; height: calc(100vh - 60px); background: blue; } footer { width: 100%; height: 60px; position: fixed; bottom: 0; left: 0; background: red; }
<div class="container"> <header></header> <div></div> </div> <footer></footer>
将页脚保持在页面底部
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.