Dylan Westra Dylan Westra - 28 days ago 18
CSS Question

How to make a Sticky footer with bootstrap?

After following a n amount of sticky footers tutorials i got stuck.

Can anyone explain where my sticky footer is going wrong?

The main idea is that the footer gets on the bottom of the page.

If the page is larger then the window then the footer should be viewable after scrolling down.

The code works on the homepage as it should except for that i get a little bit of space below the footer.

As soon as the content is bigger than the window the 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 to 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>

Answer

Try this:-

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px; /* bottom = footer height */
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    background-color:red;
}
<!DOCTYPE html>
<head>
    <title></title>
</head>
<body>
    <nav></nav>
    <article>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</article>
    <footer></footer>
</body>
</html>