ฉันกำลังลองใช้Bootstrapและฉันสงสัยว่าฉันจะแก้ไขส่วนท้ายที่ด้านล่างได้อย่างไรโดยไม่ให้มันหายไปจากหน้าหากเนื้อหาถูกเลื่อน?
ฉันกำลังลองใช้Bootstrapและฉันสงสัยว่าฉันจะแก้ไขส่วนท้ายที่ด้านล่างได้อย่างไรโดยไม่ให้มันหายไปจากหน้าหากเนื้อหาถูกเลื่อน?
คำตอบ:
ในการรับส่วนท้ายที่ติดกับด้านล่างของวิวพอร์ตของคุณให้กำหนดตำแหน่งคงที่ดังนี้:
footer {
position: fixed;
height: 100px;
bottom: 0;
width: 100%;
}
เงินทุนรวมถึง CSS นี้ในส่วน Navbar> fixed-bottom
ตำแหน่งกับการเรียน เพียงเพิ่มคลาสนี้ในองค์ประกอบส่วนท้ายของคุณ:
<footer class="fixed-bottom">
เอกสาร Bootstrap: https://getbootstrap.com/docs/4.4/utilities/position/#fixed-bottom
fixed-bottom
ไม่ได้ทำในสิ่งที่ฉันคาดหวังฉันทำแทนstatic-bottom
เพื่อเคารพความสูงของเนื้อหาของหน้า
เพิ่มสิ่งนี้:
<div class="footer navbar-fixed-bottom">
https://stackoverflow.com/a/21604189
แก้ไข:navbar-fixed-bottom
เปลี่ยนคลาสfixed-bottom
เป็น Bootstrap v4-alpha แล้ว 6
http://v4-alpha.getbootstrap.com/components/navbar/#placement
เพิ่มสิ่งนี้:
<div class="footer fixed-bottom">
เพิ่มให้วิธีนี้หรือมันจะครอบคลุมแถบด้านบนของคุณถ้าคุณมีz-index:-9999;
1
คุณสามารถทำได้โดยการรวมเนื้อหาของหน้าใน div โดยใช้สไตล์ id ต่อไปนี้:
<style>
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -60px;
}
</style>
<div id="wrap">
<!-- Your page content here... -->
</div>
ทำงานให้ฉัน
คุณอาจต้องการตรวจสอบตัวอย่างนั้น: http://getbootstrap.com/2.3.2/examples/sticky-footer.html