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

Question

我正在尝试使用此脚本实现粘滞页脚：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到#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

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

希望这是你看什么的bottom财产。