问题
I'm trying out Bootstrap and I was wondering, how I can fix the footer on the bottom without having it disappear from the page if the content is scrolled?
回答1:
To get a footer that sticks to the bottom of your viewport, give it a fixed position like this:
footer {
position: fixed;
height: 100px;
bottom: 0;
width: 100%;
}
Bootstrap includes this CSS in the Navbar > Placement section with the class fixed-bottom
. Just add this class to your footer element:
<footer class="fixed-bottom">
Bootstrap docs: http://v4-alpha.getbootstrap.com/components/navbar/#placement
回答2:
Add this:
<div class="footer navbar-fixed-bottom">
https://stackoverflow.com/a/21604189
EDIT: class navbar-fixed-bottom
has been changed to fixed-bottom
as of Bootstrap v4-alpha.6.
http://v4-alpha.getbootstrap.com/components/navbar/#placement
回答3:
Add z-index:-9999;
to this method, or it will cover your top bar if you have 1
.
回答4:
Add this:
<div class="footer fixed-bottom">
回答5:
You might want to check that example: http://getbootstrap.com/2.3.2/examples/sticky-footer.html
来源:https://stackoverflow.com/questions/19330611/fixed-footer-in-bootstrap