5

我正在尝试使用 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/

以及正在发生的事情的图片 在此处输入图像描述

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

4

2 回答 2

2

固定的！overflow: auto被分配给了错误的元素（它应该被分配给.module-content）并且module-content应该有一个bottom-padding带有页脚高度的a：

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;
}
于 2012-04-28T05:36:51.737 回答
1

我已经修改了您的小提琴，使其按照我理解您正在寻找的方式工作。

我已删除clear: both;andmargin-top: -70px;并改用bottom我设置为 0 的属性

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

希望这就是你要找的。

于 2012-04-28T04:08:19.767 回答