Nội dung trùng lặp chân trang chú ý khi nội dung chứa phao

Question

Tôi đang cố gắng triển khai chân trang dính với CSS bằng cách sử dụng: http://www.cssstickyfooter.com/using-sticky-footer-code.html.

Tôi gần như đã làm việc, nhưng khi có nổi trong vùng chứa nội dung của tôi, tôi thấy rằng chân trang sẽ chồng lên nhau một chút nội dung.

Đây là đánh dấu:

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

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

Và một fiddle những điều trên: http://jsfiddle.net/CfuAg/

Và một bức tranh về những gì đang xảy ra

Tại sao điều này lại xảy ra và một số cách để khắc phục nó là gì? Tôi đã thử thêm một phần đệm của 70px đến #content-area, nhưng nó đẩy chân trang xuống theo 70px và không dính vào phần mông của cửa sổ nữa.

Answer 1

Đã sửa lỗi! overflow: auto được gán cho yếu tố sai (nó nên được gán cho .module-content) và module-content nên có một bottom-padding với chiều cao của footer:

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

Tôi đã sửa đổi fiddle của bạn để làm cho nó hoạt động theo cách tôi hiểu những gì bạn đang tìm kiếm.

Tôi đã loại bỏ các clear: both; và margin-top: -70px; và sử dụng thay vì các bottom tài sản mà tôi đã thiết lập để 0

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

Hope đây là những gì bạn đã tìm kiếm.