页脚与页面内容不断重叠答案

【问题标题】：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" 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;
    }

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

【问题讨论】：

你忘了清除花车吗？

标签： html css footer sticky-footer

【解决方案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" 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>

【讨论】：

【解决方案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%;
}

这总是对我有用:)

【讨论】：