Содержимое тела нижнего колонтитула даже с clearfix

Question

Я не могу понять, почему мой нижний колонтитул не будет отображаться после содержимого моей страницы, а вместо этого накладывается на содержимое. Я добавил прозрачное исправление после всплывающих элементов, но нижний колонтитул все еще перекрывает мои "слайды". Вы можете видеть то, о чем я говорю в моей скрипке здесь https://jsfiddle.net/4x1n01yo/. Буду признателен за любую оказанную помощь.

Я попытался добавить:

.slides-container{
    overflow:auto;
}

Но это только частично решает проблему, перемещая нижний колонтитул на полпути вниз по странице. Любая помощь высоко ценится!

Answer 1

Это потому что .slides имеет высоту 0, Имеет высоту 0 потому что все его дети абсолютно позиционированы. Для быстрого исправления вы можете добавить следующий CSS:

.slides {
    height: 899px;
}

Но это не сильно поможет, если все ваши слайды разной высоты.