Html 页脚与页面保持重叠'；内容_Html_Css_Footer_Sticky Footer

Html 页脚与页面保持重叠'；内容

html css

Html 页脚与页面保持重叠'；内容,html,css,footer,sticky-footer,Html,Css,Footer,Sticky Footer,无论出于何种原因，我的页脚拒绝停留在页面底部，也不与页面内容重叠。它会像，接近底部，但它仍然重叠。它也不会应用非常奇怪的背景色。我尝试了很多不同的方法，但似乎都不管用。这是html <body> <div class="container"> <div id=footer> <div id=help><h8> How Can Help?</h8> <p>Customer Service</p>

无论出于何种原因，我的页脚拒绝停留在页面底部，也不与页面内容重叠。它会像，接近底部，但它仍然重叠。它也不会应用非常奇怪的背景色。我尝试了很多不同的方法，但似乎都不管用。这是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" alt="App Store" src="img/app.png" width="160" height="100">
  </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>

任何帮助都会很好，提前谢谢。

首先我去掉了你所有的

位置：sticky

代码，这对sticky footer不起作用。接下来，在CSS代码的顶部，我使用

display:flex

和

flex flow:column

使容器达到100%的高度，以使页面的布局像垂直对齐的flexbox一样工作。最后一步是给页脚一个

边距top:auto

，这在flexbox中意味着它将始终将自己推到视口的最底部：

html，
身体{
身高：100%；
保证金：0
}
.集装箱{
身高：100%；
显示器：flex；
柔性流动：柱；
}
#页脚{
页边顶部：自动；
}
/*页脚*/
#页脚{
背景色：#5D5C61；
字体大小：7px；
文本对齐：居中；
颜色：#FFFFFF；
字体系列：“Raleway”，无衬线；
字距：3px；
高度：300px；
}
#帮助{
浮动：左；
字体大小：15px；
宽度：25%；
底部：0；
}
#关于{
浮动：左；
宽度：25%；
字体大小：15px；
底部：0；
}
#应用程序{
浮动：对；
宽度：25%；
字体大小：15px；
底部：0；
}
#电子邮件{
浮动：对；
宽度：25%；
字体大小：15px；
底部：0；
}


你能帮什么忙？
客户服务
跟踪我的订单
客户服务推特
尺码表
返回
获取应用程序

关于我们

关于地区服装
事业
成为附属公司
获取独家优惠和更新

注册

哟，我就这么做了

#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%;
        }

如果您想为固定在页面底部的页脚找到一个简短而简单的解决方案，您可以使用以下方法：

#footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
}

这对我来说总是有效：）

你忘了清理浮子了吗？真的不知道为什么你需要一个粘性位置？？

#footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
}