页脚与页面内容不断重叠
Posted
技术标签:
【中文标题】页脚与页面内容不断重叠【英文标题】：Footer keeps overlapping with the page's content 【发布时间】：2020-03-31 22:44:55 【问题描述】：无论出于何种原因，我的页脚都拒绝停留在页面底部并且不与页面内容重叠。它会像底部一样，但它仍然重叠。它也不会应用非常奇怪的背景颜色。我尝试了很多不同的东西，但似乎没有任何效果。这是html。
<body>
<div class="container">
<div id=footer>
<div id=help><h8> How Can Help?</h8>
<p>Customer Service</p>
<p>Track My Order </p>
<p>Customer Service Twitter</p>
<p>Size Guide</p>
<p>Returns</p>
</div>
<div id=app><h8> Get The App</h8><br>
<a href="https://www.apple.com/ios/app-store/">
<img border="0" src="img/app.png" >
</a>
</div>
<div id=aboutus><h8> About Us </h8>
<p></p>
<p>About District Apparel</p>
<p>Careers</p>
<p>Become An Affiliate</p>
</div>
<div id=email><h8>Get Exclusive Offers & Updates</h8><br>
<form>
Sign Up
<input type="text" name="firstname">
</form>
</div>
</div>
</div>
</body>
这里是css
/* Footer */
#container
width: 100%;
background-color: #5D5C61;
#footer
background-color: #5D5C61;
font-size: 7px;
text-align: center;
color: #FFFFFF;
font-family: 'Raleway', sans-serif;
word-spacing: 3px;
bottom: 0px;
height: 300px;
position: -webkit-sticky; /* Safari */
position: sticky;
clear: both;
left: 0;
min-width:100%;
#help
float: left;
font-size: 15px;
width:25%;
bottom:0;
#aboutus
float: left;
width:25%;
font-size: 15px;
bottom:0;
#app
float: right;
width: 25%;
font-size: 15px;
bottom:0;
#email
float: right;
width: 25%;
font-size: 15px;
bottom:0;
任何帮助都会很棒，在此先感谢。
【问题讨论】：
你忘了清除花车吗？ 【参考方案1】：首先，我删除了您所有的 position:sticky 代码，它不适用于粘性页脚。接下来，在 CSS 代码的顶部，我使用 display:flex 和 flex-flow:column 使容器的高度为 100%，以使页面布局像垂直对齐的 flexbox 一样工作。最后一步是给页脚一个margin-top:auto，这在 flexbox 中意味着它总是将自己推到视口的最底部：
html,
body
height: 100%;
margin: 0
.container
height: 100%;
display: flex;
flex-flow:column;
#footer
margin-top: auto;
/* Footer */
#footer
background-color: #5D5C61;
font-size: 7px;
text-align: center;
color: #FFFFFF;
font-family: 'Raleway', sans-serif;
word-spacing: 3px;
height: 300px;
#help
float: left;
font-size: 15px;
width: 25%;
bottom: 0;
#aboutus
float: left;
width: 25%;
font-size: 15px;
bottom: 0;
#app
float: right;
width: 25%;
font-size: 15px;
bottom: 0;
#email
float: right;
width: 25%;
font-size: 15px;
bottom: 0;
<div class="container">
<div id=footer>
<div id=help>
<h8> How Can Help?</h8>
<p>Customer Service</p>
<p>Track My Order </p>
<p>Customer Service Twitter</p>
<p>Size Guide</p>
<p>Returns</p>
</div>
<div id=app>
<h8> Get The App</h8><br>
<a href="https://www.apple.com/ios/app-store/">
<img border="0" src="img/app.png" >
</a>
</div>
<div id=aboutus>
<h8> About Us </h8>
<p></p>
<p>About District Apparel</p>
<p>Careers</p>
<p>Become An Affiliate</p>
</div>
<div id=email>
<h8>Get Exclusive Offers & Updates</h8><br>
<form>
Sign Up
<input type="text" name="firstname">
</form>
</div>
</div>
</div>【讨论】：
【参考方案2】：哟，我刚刚做了
#footer
background-color: #5D5C61;
font-size: 7px;
text-align: center;
color: #FFFFFF;
font-family: 'Raleway', sans-serif;
word-spacing: 3px;
bottom: 0px;
height: 300px;
position: absolute;
bottom: 0;
clear: both;
left: 0;
min-width:100%;
https://jsfiddle.net/fke46qno/
【讨论】：
真的不知道你为什么需要一个粘性位置？？【参考方案3】：如果您想为页面底部固定的页脚提供一个简短的解决方案，您可以使用以下方法：
#footer
position: fixed;
left: 0;
bottom: 0;
width: 100%;
这总是对我有用:)
【讨论】：
以上是关于页脚与页面内容不断重叠的主要内容，如果未能解决你的问题，请参考以下文章