html - How to make a Sticky footer with bootstrap? -
after following n amount of sticky footers tutorials got stuck.
can explain sticky footer going wrong?
main idea footer gets on bottom of page.
if page larger window footer should viewable after scrolling down.
the code works on homepage should except little bit of space below footer.
content bigger window footer stops working.
css:
html, body { min-height:100%; height:100%; margin: 0; padding:0; font-family: 'open sans', sans-serif; background-color: #2b2d2f; color: #d9edf7; } #wrap { min-height: 100%; /* equal footer height */ margin-bottom: -30px; } #wrap:after { content: ""; display: block; } #footer, #wrap:after { height: 30px; } #footer{ background-color: #2b542c; text-align:center; }
html:
<div id="wrap"> ... content... </div> <div id="footer"> ... content ... </div>
you can use min-width
on #wrap
. @ codepen
just like:
#wrap { min-height: calc(100vh - 30px); /* '30px' - height of footer */ }
hope helps!
Comments
Post a Comment