时间戳

首页 > 解决方案 > 页脚与页面内容不断重叠

html - 页脚与页面内容不断重叠

问题描述

无论出于何种原因，我的页脚拒绝停留在页面底部并且不与页面内容重叠。它会像底部一样，但它仍然重叠。它也不会应用非常奇怪的背景颜色。我尝试了很多不同的东西，但似乎没有任何效果。这是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>

这是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;
    }

任何帮助都会很棒，在此先感谢。

标签： htmlcssfootersticky-footer

解决方案

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

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

这总是对我有用:)

推荐阅读