Bootstrap carousel makes my footer display on the middle

If I try to display my footer on a page having a Bootstrap Carousel, the footer does not go at the bottom of the page.

If I remove the Carousel, the footer goes to the bottom.

My basic footer is:

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

See demo here: http://jsfiddle.net/2d4wn1aw/1/

Does any one know why?

Thank you.

Solution

Try removing all those <br> & switching position: to relative; on .footer

EDITED: See Fiddle

For sticky-footer check here:

Sticky footer is basically a div which wraps all content with min-height: 100% and negative margin-bottom (same height as footer but negative), then another div inside this wrapper will push blank space of the same height as the footer, leaving room for it (the footer), which would go outside the wrapper.

In case of interest, also a Flexbox sticky-footer example: