Giữ chân trang ở dưới cùng với Javascript

Hiện tại tôi đang cố giữ chân trang ở dưới cùng bằng Javascript. Đây là kết quả:Giữ chân trang ở dưới cùng với Javascript

document.getElementsByTagName('body').onload = function() {KeepFoot()}; 
var element = document.getElementById('container'); 
var height = element.offsetHeight; 

function KeepFoot() { 
    if (height < screen.height) { 
     document.getElementById("footer").style.position = "fixed"; 
     document.getElementById("footer").style.bottom = "0"; 
     document.getElementById("footer").style.left = "0"; 
     document.getElementById("footer").style.right = "0"; 
    } 
}

Ý tưởng của tôi là lấy chiều cao của div container và so sánh nó với chiều cao của độ phân giải của máy tính. Nếu chiều cao của vùng chứa div nhỏ hơn chiều cao của độ phân giải của PC, hãy đặt thành chân trang div position: fixed;

Nhưng có vấn đề trong tập lệnh vì nó không hoạt động.

Một câu hỏi khác, tập lệnh mà tôi đã tạo sẽ ổn nếu giữ chân trang ở dưới cùng?

HTML:

<html> 
    <head> 
     ... 
    </head> 
    <body> 
     <div id="container"> 
      <div id="header"></div> 
      <div id="content"></div> 
      <div id="footer"></div> 
     </div> 
    </body> 
</html>

Nguồn

2015-05-16 Keaire

Tại sao không sử dụng [CSS chân dính] (http : //ryanfait.com/sticky-footer/) (Phương pháp [phiên bản HTML5] (http://ryanfait.com/html5-sticky-footer/))? – SmokeyPHP

"DOMContentLoaded" sự kiện chỉ cháy khi tài liệu đã sẵn sàng tương tự như jquery của $(document.ready).

và, đối với kiểu bạn có thể sử dụng lớp thay vì đặt từng kiểu bằng javascript.

Mã

document.addEventListener("DOMContentLoaded", function (event) { 
 
    var element = document.getElementById('container'); 
 
    var height = element.offsetHeight; 
 
    if (height < screen.height) { 
 
     document.getElementById("footer").classList.add('stikybottom'); 
 
    } 
 
}, false);

#footer.stikybottom { 
 
    position: fixed; 
 
    bottom:0; 
 
    left: 0; 
 
    right:0; 
 
}

<div id="container"> 
 
    <div id="header">header</div> 
 
    <div id="content">Conent</div> 
 
    <div id="footer">Something in footer</div> 
 
</div>

Nguồn

2015-05-16 15:02:01

Vui lòng thêm giải thích về mã của bạn và lý do bạn viết mã theo cách đó. Các câu trả lời chỉ có mã thường bị cau mày. –

Cảm ơn jed-panda, bây giờ nó hoạt động. Và cảm ơn đề xuất thêm lớp học. – Keaire

Điều này sẽ không hoạt động nếu chiều cao màn hình quá nhỏ để vừa với chân trang + nội dung. –

tôi điều chức năng của bạn hoạt động rất tốt. có thể những gì còn thiếu là chức năng gọi.

function KeepFoot() { 
    if (height < screen.height) { 
     document.getElementById("footer").style.position = "fixed"; 
     document.getElementById("footer").style.bottom = "0"; 
     document.getElementById("footer").style.left = "0"; 
     document.getElementById("footer").style.right = "0"; 
    } 
} 

KeepFoot();

thấy điều này jsfiddle

Nguồn

2015-05-16 14:54:34

Nếu những gì bạn muốn là duy trì chân trên dưới cùng của trang, bạn phải đọc này. cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/

Bạn có thể làm điều đó mà không cần js.

Nguồn

2015-05-16 15:05:04

Chức năng không được gọi khi đang tải. Bạn có thể đính kèm các chức năng KeepFoot trực tiếp đến thẻ nội dung như thế này Thay vì kêu gọi như thế này:

document.getElementsByTagName('body').onload = function() {KeepFoot()};

hoặc sử dụng mã của tôi từ bên dưới:

(function() { 
    var offsetHeight = document.getElementById('container').offsetHeight; 
    var screenHeight = screen.height; 

if(offsetHeight < screenHeight){ 
    document.getElementById("footer").style.position = "fixed"; 
    document.getElementById("footer").style.bottom = "0"; 
    document.getElementById("footer").style.left = "0"; 
} 
})();

Nguồn

2015-05-16 15:13:02

Giữ chân trang ở dưới cùng với Javascript

Trả lời

Các vấn đề liên quan