Following Bootstrap example, simply move your #push
div in the #wrap
div :
<div id="wrap">
...
<div id="push"></div>
</div><!-- #wrap -->
<div id="footer">
...
</div>
문제
I have implemented this sticky footer for Bootstrap 2.3.2 on my site but am running into an issue on a page that has short content here. There is too much space between the content and the footer, as well as an inconvenient scrollbar. Is there a way to prevent the huge gap in space and the scroll bar on a short page with short content?
I am using this code to generate the sticky footer.
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#wrap{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -150px;
}
#push{
height: 150px;
}
#footer{
background-color: #3BC1CD;
height: 150px;
}
해결책
Following Bootstrap example, simply move your #push
div in the #wrap
div :
<div id="wrap">
...
<div id="push"></div>
</div><!-- #wrap -->
<div id="footer">
...
</div>
다른 팁
It's not giving the desired result because the #push div
is outside of the wrapper div
.
In your html you have :
<div id="wrap"></div>
<div id="push"></div>
<div id="footer"></div>
in bootstrap they have :
<div id="wrap">
<div class="container">
<div id="push"></div>
</div>
<div id="footer"></div>
Just indent the #push inside the #wrap
Remove the height on <div id="push">
or remove it altogether. This is unnecessary.