Question

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

我差点搞定了，但是当我的内容容器中有浮动内容时，我发现页脚会重叠一些内容。

这是标记：

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

以上的小提琴：http://jsfiddle.net/CfuAg/

还有正在发生的事情的图片 enter image description here

为什么会发生这种情况？有哪些方法可以解决这个问题？我尝试将70px的填充添加到#content-area，但它将页脚向下推70px并且不再粘在窗口的底部。

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

Answer 2

我修改你的小提琴，让它按照我理解你所寻找的方式工作。

我已移除clear: both;和margin-top: -70px;，而是使用我设置为0的bottom属性

http://jsfiddle.net/CfuAg/4/

希望这是你所寻找的。

当内容包含浮动时，粘性页脚重叠内容

2 个答案: