css - Bootstrap 轮播使我的页脚显示在中间

Question

如果我尝试在具有 Bootstrap Carousel 的页面上显示页脚，则页脚不会位于页面底部。

如果我移除 Carousel，页脚会转到底部。

我的基本页脚是:

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

在此处查看演示:http://jsfiddle.net/2d4wn1aw/1/

有人知道为什么吗？

谢谢。

Answer 1

尝试删除所有这些 <br> & 开关 position:至 relative;在 .footer

EDITED: See Fiddle

For sticky-footer check here:

粘性页脚基本上是 div用 min-height: 100% 包装所有内容和负面 margin-bottom (与页脚高度相同但为负)，然后是另一个 div在这里面 wrapper将push同样的空格 height作为 footer ，为它留出空间(footer)，这将超出包装。

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