Sticky Footer¶
Problem Statement¶
How to pin footer to be fixed to bottom of browser window without min-height for content cell
Sample CSS¶
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;
}
Common Issues¶
- Footer must be absolute from
<html>
. Avode any parents to.footer
with position relative. - If you don’t need to put a fixed height to your footer, you need to
change “margin-bottom” at the
body
in the different media queries in your css