Bootstrap 4 sticky footer overlaps content
Created by: arinsinc
I am using Bootstrap 4 for adding sticky footer which have two components : bottom bar(using container-fluid) with copyright year and website name and sub-footer navigation menu(using container element) which have sitemap and other links.
Here is my css
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 40px;
height: 100%;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
}
.footer .container-fluid {
height: 40px;
}
.footer .container {
padding-top: 20px;
}
Whenever I remove those two last footer sub classes and add height:40px; to footer, there is no overlapping of content but a page shows vertical scrollbar even with less content on page.