Reputation: 776
I'm using Twitter Bootstrap, Is there are any classes for footer? Because I can't make it to stay on bottom. Here is my jsfiddle https://jsfiddle.net/fNPvf/18578/. This is footer css:
.footer-no-nav {
border-top: 1px solid #C2B8B8;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block;
}
Here is the picture when I use bootstrap class navbar-fixed-bottom
Here is when the window resized:
Fixed my problem, no need any navbar-fixed-bottom:
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
Upvotes: 2
Views: 5696
Reputation: 724
Sounds like you are after a Sticky Footer.
Updated fiddle here: https://jsfiddle.net/fNPvf/18589/
The css relies on a removing the total height of the footer from the margin-top
to make the footer stick to the bottom unless there is enough content to push it further. For a 40px height + 1px border-top footer this would calculate our margin-top to equal -41px.
footer {
border-top: 1px solid #C2B8B8;
height:40px;
margin-top:-41px;
}
body,html{
height:100%;
}
.container{
min-height:100%;
}
<body>
<div class="container">main content can go here</div>
<footer>sticky footer content is stuck here</footer>
</body>
Upvotes: 1
Reputation: 776
I've just fixed my problem, no need any navbar-fixed-bottom:
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
Upvotes: 1
Reputation: 470
try to add div for all your contain
.all {
min-height:750px;
}
and this is the link for your footer https://jsfiddle.net/fNPvf/18587/
Upvotes: 0
Reputation: 16341
Add navbar-fixed-bottom
class to fixed it to the bottom like this:
<footer class="footer-no-nav navbar-fixed-bottom" role="contentinfo">
<!--content-->
</footer>
N.B. You will have to give a background-color to the footer div and add a margin-bottom
equivalent to the height of the footer to prevent elements from being covered by the footer.
Upvotes: 0
Reputation: 140
This work for my webpage
<div class="panel-footer navbar-inverse navbar-fixed-bottom">
Upvotes: 0