Настройка липкого нижнего колонтитула на длинные тексты

Question

Я пытаюсь создать липкий нижний колонтитул. Я нашел пример here и скорректировал его.
Однако, похоже, он не подходит для длинных текстов. Когда контент достаточно длинный, так что появляется полоса прокрутки, содержимое просто течет под нижним колонтитулом, а не всегда остается выше.

JS:

function myFunction() { 
    if (x.className === "topnav") { 
    x.className += " responsive"; 
    } else { 
    x.className = "topnav"; 
    } 
} 

CSS:

footer div { 
    display: inline-block; 
    vertical-align: top; 
    right: 50%; 
    padding: 10px; 
} 

footer { 
    position: absolute; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    width: 100%; 
    min-height: 30px; 
    line-height: 30px; 
    vertical-align: middle; 
    background-color: #1A1A1A; 
    color: #a9a9a9; 
    border-top: 8px solid #2F2F2F; 
    padding: 10px 40px 20px; 
    font-size: 0.7em; 
    overflow: hidden; 
} 

Here is a fiddle.

Answer 1

Вы должны изменить положение абсолютного к этому:

position:fixed; 
    bottom:0; 

вот fiddle