Nội dung ẩn chân trang dính

Question

Tôi đã tạo CSS sau cho chân trang dính nhưng vấn đề tôi phải đối mặt là khi nội dung tràn với cuộn thì một số nội dung ẩn đằng sau chân trang (xem ảnh chụp màn hình đính kèm). Vui lòng cho tôi biết cách tôi có thể khắc phục sự cố này để chân trang dính phải dính vào phần dưới cùng với một số tỷ lệ đệm nhất định hoặc các nội dung tương tự và nội dung không được ẩn.

CSS:

.fo { 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    height:65px; 
    width: 100%; 
    color: #eaeaea; 
    margin-left: -8px; 
} 

Answer 1

Tôi đã xem qua câu trả lời này ra trên internet trong quá khứ. Các công trình lớn:

HTML

<div id="container"> 
    <div id="header"></div> 
    <div id="body"></div> 
    <div id="footer"></div> 
</div> 

CSS

html, 
body { 
    margin:0; 
    padding:0; 
    height:100%; 
} 
#container { 
    min-height:100%; 
    position:relative; 
} 
#header { 
    background:#ff0; 
    padding:10px; 
} 
#body { 
    padding:10px; 
    padding-bottom:60px; /* Height of the footer */ 
} 
#footer { 
    position:absolute; 
    bottom:0; 
    width:100%; 
    height:60px; /* Height of the footer */ 
    background:#6cf; 
} 
/* IE 6 and down: 
#container { 
    height:100%; 
} 

Answer 2

Xin lỗi nếu điều này là quá cũ, nhưng tôi đã đưa ra một giải pháp mà làm việc ra thực sự tốt cho tôi! Tôi tạo ra một div rõ ràng và cho nó một chiều cao.

.clear { clear: both; height: 60px; } 

<div class="clear"></div> 
<div id="footer">FOOTER CONTENT</div> 

Chiều cao là bất cứ thứ gì bạn cần để giữ nội dung phía trên chân trang, ví dụ: cao hơn chân. Nếu chân trang là 50px; cao, tôi làm 60px; cho chiều cao trong div rõ ràng. Vì vậy, khi tôi di chuyển, chân trang vẫn ở đúng vị trí nhưng khi tôi đi xuống phía dưới, nội dung đang chảy từ phía sau chân trang có chỗ để được đẩy lên phía trên chân trang mà không bị che phủ. Siêu đơn giản, và nó hoạt động hoàn hảo. Có lẽ ai đó có thể sửa tôi nếu có điều gì đó sai trái với điều này, chẳng hạn như xung đột với một số loại. Xin lỗi đây là một bài đăng cũ hơn, nhưng tôi cảm thấy như tôi có thể thêm vào điều này vì bản thân tôi đã tìm thấy bài đăng này tìm kiếm giải pháp.

Answer 3

Tôi đã gặp sự cố với điều này khi tôi đưa ra giải pháp của riêng mình. Tôi đặt chân của tôi để có một height của 10%:

footer{ 
    position: fixed; 
    **height:10%;** 
    width:100%; 
    padding-top: 2px; 
    bottom: 0; 
    clear: both; 
    background-color: black; 
    color: white; 
    float: left; 
    overflow: auto; 
} 

và nội dung của tôi để có một bottom margin của 11%:

#content{ 
    width: 800px; 
    margin: auto; 
    background-color: rgba(0,0,0,.7); 
    color: #99FFCC; 
    height: 80%; 
    padding:30px; 
    **margin-bottom: 11%;** 
} 

Tôi hy vọng điều này sẽ giúp bất cứ ai có cùng một vấn đề!

Answer 4

Tôi vừa thêm thẻ br 5 lần vào cuối văn bản nội dung để tạo thêm một số khoảng trắng. Nó đã giúp đỡ tôi.

đôi khi giữ cho nó hoạt động đơn giản !!!

Answer 5

Tôi đã có cùng một vấn đề và các giải pháp khác chỉ cho tôi đi đúng hướng, nhưng vì tôi đang sử dụng góc Chất liệu tất cả những gì phải làm là thêm layout = "cột" và nó làm việc rất lớn

<div id="container" layout="column"> 
     <div id="header"></div> 
     <div id="body"></div> 
     <div id="footer"></div> 
    </div>