内容に浮動小数点数が含まれているとコンテンツに重なって貼り付くフッタ

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/

そして

を何が起こっているかの絵

なぜこれが起こっているのですか？それを修正する方法は何ですか？私は70pxの埋め込みを#content-areaに追加しようとしましたが、フッタを70pxだけ押し下げ、ウィンドウのbuttomにはそれ以上固執しません。

Answer 1

固定！かなり近いように思われること

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プロパティを使用してきたが、これはあなたが見えたものであると思います。