Нижний колонтитул, перекрывающий содержимое тела даже с помощью clearfix

Question

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

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

.slides-container{ 
    overflow:auto; 
} 

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

Answer 1

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

.slides { 
    height: 899px; 
} 

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