Tôi đang dùng thử Bootstrap và tôi đã tự hỏi, làm cách nào để sửa phần chân trang ở dưới cùng mà không làm nó biến mất khỏi trang nếu nội dung được cuộn?
Câu trả lời:
Để có được một chân trang dính vào cuối khung nhìn của bạn, hãy đặt nó một vị trí cố định như sau:
footer {
position: fixed;
height: 100px;
bottom: 0;
width: 100%;
}
Bootstrap bao gồm CSS này trong phần Navbar> Placement với lớp fixed-bottom. Chỉ cần thêm lớp này vào phần tử footer của bạn:
<footer class="fixed-bottom">
Tài liệu về Bootstrap: https://getbootstrap.com/docs/4.4/utilities/position/#fixed-bottom
fixed-bottomđã không làm những gì tôi mong đợi, thay vào đó tôi đã làm static-bottomđể tôn trọng chiều cao nội dung trang.
Thêm điều này:
<div class="footer navbar-fixed-bottom">
https://stackoverflow.com/a/21604189
EDIT: lớp navbar-fixed-bottomđã được thay đổi thành fixed-bottomBootstrap v4-alpha.6.
http://v4-alpha.getbootstrap.com/components/navbar/#placement
Thêm điều này:
<div class="footer fixed-bottom">
Thêm z-index:-9999;vào phương pháp này hoặc nó sẽ che thanh trên cùng của bạn nếu bạn có 1.
Bạn có thể làm điều này bằng cách gói nội dung trang trong một div có áp dụng kiểu id sau:
<style>
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -60px;
}
</style>
<div id="wrap">
<!-- Your page content here... -->
</div>
Đã làm cho tôi.
Bạn có thể muốn kiểm tra ví dụ đó: http://getbootstrap.com/2.3.2/examples/sticky-footer.html