Кнопка Animate.css находится в неправильном положении

Question

Если я пытаюсь сделать анимацию с помощью Animate.css, возникает проблема с позиционированием кнопки.
Обычно она находится в нижнем колонтитуле, но во время затухания она находится в центре: https://jsfiddle.net/m4f1wen3/

Я не могу найти решение для этого в течение 1 недели.

<div id="player">
 <header>
  ...
 </header>

 <main>
  ...
 </main>

 <footer>
  <button>Lass uns loslegen!</button>
 </footer>
</div>

Моя цель состоит в том, чтобы он прилипал при переходе на дно, как после анимации.

Answer 1

Анимация fadeInLeft добавляет свойство перевода в ваш div и изменяет положение нижнего колонтитула, который имеет абсолютное позиционирование.

Добавьте это в свою таблицу стилей, и она будет работать:

html, body, #index, #player {
  height: 100%;
}

Это заставит html, body и ваши элементы div заполнить высоту страницы, и нижнее положение нижнего колонтитула останется на месте.

Answer 2

Пожалуйста, замените этот стиль в вашем стиле

header{height: 150px;}
main{height: 200px;}
footer{height:120px; bottom:0; position:relative; width:100%;}

Answer 3

Селектор footer в CSS выбирает нижний колонтитул, который находится внутри player div и index div.

Добавление этого в ваш CSS после footer селектор

#player footer {
  position: relative;
} 

Удаляет проблему.