css - 当内容包含 float 时粘性页脚重叠内容

Question

我正在尝试使用 CSS 实现粘性页脚:http://www.cssstickyfooter.com/using-sticky-footer-code.html .

我几乎已经开始工作了，但是当我的内容容器中有 float 时，我发现页脚会与内容重叠一些。

这是标记:

<div class="container" id="content-area">
  <div class="module-content" id="mycontent">
    <div class="menu">
      <ul>
        <li>
          <a class="current-page" href="http://localhost/">1</a>
        </li>
      </ul>
    </div>
    <div class="module-content">
      <div>
        <p>Lorem ipsum dolor sit amet, consequat et metus, platea
        posuere adipiscing porttitor dis amet ut. Turpis diam amet,
        mollit commodo. Fusce vestibulum habitant, auctor vel ac
        dui, nulla lacus hac, raesent euismod habitant eros massa
        nulla. Justo dui, facilisis cras. Est ante maecenas
        vehicula, etiam vestibulum mi lorem massa, sed nullam
        suspendisse lectus ante purus gravida, iaculis urna pede
        fermentum. Arcu id ligula arcu, erat vivamus quisque
        quisque, tristique ipsum et. Sociis duis ut, morbi dolor
        duis volutpat lacus viverra, scelerisque sodales sed, vel
        nulla. Elit pede nullam ullamcorper consectetuer ac massa,
        lobortis eget id dictumst et quis, nulla metus. Magnis id
        id suscipit porttitor faucibus, felis commodo risus massa,
        fusce tempus praesent aliquet sit vulputate tempor.</p>
      </div>
    </div>
  </div>
</div>
<div class="container" id="footer">
  <div class="container">
    <p>Lorem ipsum dolor sit amet, consequat et metus, platea
    posuere adipiscing porttitor dis amet ut. Turpis diam amet,
    mollit commodo. Fusce vestibulum habitant, auctor vel ac dui,
    nulla lacus hac,</p>
  </div>
</div>

还有 CSS:

html, body {
   height: 100%;
}

#content-area {
   min-height: 100%;
   overflow: auto;
   position: relative;
}

.container {
   margin: 0 auto;
   width: 985px;
}

#mycontent .menu {
   float: left;
   margin-right: 10px;
   padding-top: 13px;
   width: 100px;
}

#mycontent .module-content {
   float: left;
   width: 700px;
}

#footer {
   color: red;
   background: black;
   opacity: 0.6;
   height: 70px;
   margin-top: -70px;
   width: 100%;
   clear: both;
}

还有上面的 fiddle :http://jsfiddle.net/CfuAg/

以及正在发生的事情的图片

为什么会发生这种情况，有哪些解决方法？我尝试将 70px 的填充添加到 #content-area，但它会将页脚向下推 70px 并且不会粘在按钮上不再是 window 了。

Answer 1

已修复! overflow: auto 被分配给了错误的元素(它应该被分配给 .module-content)并且 module-content 应该有一个 bottom-padding 与页脚的高度:

html, body {
   height: 100%;
}

#content-area {
   min-height: 100%;
      position: relative;
}

.container {
   margin: 0 auto;
   width: 985px;
}

#mycontent .menu {
   float: left;
   margin-right: 10px;
   padding-top: 13px;
   width: 100px;
}

#mycontent .module-content {
   float: left;
   width: 700px;
   overflow: auto;
   padding-bottom: 70px;
}

#footer {
   color: red;
   background: black;
   opacity: 0.6;
   height: 70px;
   margin-top: -70px;
   width: 100%;
   clear: both;
}