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.