Bootstrap 3 - footer nổi

Question

Tôi muốn có một thiết kế trên trang web của tôi, nơi chân trang luôn xuất hiện trên màn hình và nổi. Khi người dùng cuộn xuống di chuyển chân trang với họ. Tôi đã không bán bản thân mình trên ý tưởng - nhưng đó là nơi tôi nghĩ rằng tôi muốn liên kết với các công cụ của công ty từ. Nếu đây là một ý tưởng tồi, xin vui lòng cho tôi biết những hạn chế (trên điện thoại di động có thể?).

Tôi đã xem thiết kế và ví dụ có chân trang ở cuối trang, nhưng nếu đó là "dưới màn hình đầu tiên", người dùng cần cuộn xuống để xem. Không tốt.

Ai đó có thể cung cấp cho tôi thông tin cơ bản về cách thực hiện điều này không?

Xin cảm ơn trước.

Answer 1

Bootstrap có một lớp học làm những gì bạn muốn: .navbar-fixed-bottom. Sử dụng lớp đó là giải pháp tốt hơn, vì bạn không cần css tùy chỉnh.

Tuy nhiên, nếu bạn muốn sử dụng CSS tùy chỉnh, dưới đây là cách thực hiện. Giả sử phần tử chân trang của bạn có ID 'chân trang':

#footer { 
    position: fixed; 
    width: 100%; 
    bottom: 0; 
} 

Và bạn phải đảm bảo rằng khi người dùng cuộn xuống cuối trang, chân trang không được đặt nội dung thấp nhất. Để tránh điều đó, giải pháp đơn giản nhất là thêm lề dưới vào phần tử cơ thể với cùng số tiền như chiều cao chân trang. Giả sử các yếu tố chân của bạn là 100px cao bạn có thể sử dụng mã này:

body { 
    margin-bottom: 100px; 
} 

Tuy nhiên, để chắc chắn rằng bạn tránh chân chồng lên nhau bạn sẽ phải sử dụng jQuery để cập nhật lề dưới cơ thể về sự thay đổi kích thước màn hình, bởi vì chiều cao chân có thể thay đổi, đặc biệt là trong bố cục đáp ứng.