Đẩy chân trang xuống dưới khi trang không đầy đủ

Question

Tôi đang phát triển một ứng dụng web di động. Đây là cấu trúc chính từ trên xuống dưới: div tiêu đề, div menu, div nội dung, chân trang div. Tiêu đề, menu và chân trang là hằng số và các trang được tải vào div nội dung bằng ajax.

Một số trang có nhiều nội dung và chúng điền vào trang để bạn cần phải cuộn. Một số trang chỉ có một hoặc hai dòng nội dung để chúng bỏ trống phần lớn (Không nhất thiết phải là các trang khác nhau - một trang ví dụ hiển thị danh sách đơn hàng, bạn không thể có đơn đặt hàng và bạn có thể có hàng trăm ...).

Đây là những gì tôi muốn đạt được: Nếu trang không đầy đủ nội dung, chân trang sẽ ở cuối trang. Nếu trang đầy và cần di chuyển, chân trang sẽ ngay sau nội dung (vì vậy bạn cuộn xuống trang và cuối cùng bạn đến chân trang).

Các giải pháp chân trang dính không tốt cho tôi bởi vì tôi không muốn chân trang luôn dính vào dưới cùng, chỉ khi trang không đầy nội dung.

Có cách nào để đạt được điều đó không? Cảm ơn.

Answer 1

Sau đó, bạn phải sử dụng javascript cho điều đó - tính toán chiều cao của nội dung - trừ nó từ chiều cao cửa sổ và thiết lập margin-top của chân từ khoảng cách đó:

• jsfiddle
• jsfiddle show

HTML

<div id="header" class="header">Header</div> 
<div id="content" class="content">Content</div> 
<div id="footer" class="footer">Footer</div> 

JS (Ví dụ này sử dụng jQuery, nó nên được bao gồm trước khi kịch bản này.)

$('#footer').css('margin-top', 
    $(document).height() 
    - ($('#header').height() + $('#content').height()) 
    - $('#footer').height() 
); 

Bạn có thể đặt một cửa sổ onresize đó gọi hàm này trên bất kỳ thay đổi kích thước của cửa sổ.

[sửa blag:]

Đây là onResize phương pháp (nhưng với một min-height và không phải là một margin-top)

Check the JSFiddle

// function to set the height on fly 
function autoHeight() { 
    $('#content').css('min-height', 0); 
    $('#content').css('min-height', (
    $(document).height() 
    - $('#header').height() 
    - $('#footer').height() 
    )); 
} 

// onDocumentReady function bind 
$(document).ready(function() { 
    autoHeight(); 
}); 

// onResize bind of the function 
$(window).resize(function() { 
    autoHeight(); 
}); 

---

Borders, đệm và lề

Nếu bạn muốn có biên giới và đệm bao gồm trong việc tính toán, bạn có thể sử dụng outerHeight() thay vì height(). Ngoài ra outerHeight(true) cũng bao gồm các lề.

Answer 2

Chân trang Chú thích CSS nên giải quyết vấn đề của bạn.

Here's an example

Đó là siêu dễ dàng để cài đặt và sử dụng.Nó sẽ ép chân trang xuống với nội dung và nếu nội dung không đủ lớn để lấp đầy trang, nó sẽ dính vào đáy.

Answer 3

function autoHeight() { 
     var h = $(document).height() - $('body').height(); 
     if (h > 0) { 
      $('#footer').css({ 
       marginTop: h 
      }); 
     } 
    } 
    $(window).on('load', autoHeight); 

Answer 4

Giải pháp này phù hợp với tôi. Tôi nghĩ rằng điều này là hoàn hảo nếu bạn có nhiều hơn một #header và #footer. Nó chỉ đẩy nội dung xuống với phần đệm phía dưới nếu phần thân nhỏ hơn khung nhìn.

function autoHeight() { 
    var bodyHeight = $("body").height(); 
    var vwptHeight = $(window).height(); 
    var gap = vwptHeight - bodyHeight; 
    if (vwptHeight > bodyHeight) { 
     $("#content").css("padding-bottom" , gap); 
    } else { 
     $("#content").css("padding-bottom" , "0"); 
    } 
} 
$(document).ready(function() { 
    autoHeight(); 
}); 
$(window).resize(function() { 
    autoHeight(); 
});