Question

无论出于何种原因，我的页脚都拒绝停留在页面底部并且不与页面内容重叠。它将接近底部，但仍会重叠。它也不会应用真正奇怪的背景色。我尝试了很多不同的方法，但是似乎没有任何效果。这是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;
    }

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

Answer 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>

Answer 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/

Answer 3

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

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

这总是对我有用：）

页脚与页面内容不断重叠

3 个答案: