Липкий нижний колонтитул в HTML/CSS, проблемы с отображением

Question

Я работаю над веб-сайтом и попытался прикрепить нижний колонтитул к нижней части, поскольку многие страницы не будут достаточно длинными, чтобы подтолкнуть нижний колонтитул.

я применил эту технику: http://mystrd.at/modern-clean-css-sticky-footer/

Моя страница можно посмотреть здесь: https://jsfiddle.net/cgLf0oLa/

Я считаю, что этот вход CSS очень важно:

html { 
    position: relative; 
    min-height: 100%; 
} 
body { 
    margin: 0 0 400px; 
} 

Однако я испытываю проблемы , Нижний колонтитул отображается поверх другого содержимого, и я не знаю, как настроить его на размер содержимого. Помощь очень ценится.

С наилучшими пожеланиями,

Clemens

Answer 1

Try добавляя :after с высотой равняться высоте футера к обертке над сноске. Он оставляет пустую область ниже нижнего колонтитула, которая подталкивает нижний колонтитул к основанию.