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

Popular posts from this blog

aws api gateway - SerializationException in posting new Records via Dynamodb Proxy Service in API -

asp.net - Problems sending emails from forum -