HTML Нижний колонтитул внизу экрана, но не липкий

Question

Я хочу нижний колонтитул внизу экрана, независимо от его размера. Я нашел много решений для этого, но те нижние колонтитулы - липкие нижние колонтитулы. Что я ищу - это нижний колонтитул, который находится в нижней части экрана, однако, когда пользователь прокручивается вниз, нижний колонтитул также должен закручиваться.

В this стрелка вниз находится в нижней части экрана, независимо от размера экрана. Когда пользователь прокручивает, стрелка также прокручивается. Это то, что я ищу.

Answer 1

В примере, который вы нам предоставили, используется динамическая высота на их контейнере, так что контейнер остается экранирующим, несмотря ни на что.

Это может быть acomplished со следующим кодом: https://jsfiddle.net/6jvs0kv3/

В основном то, что я делаю, вызывая яваскрипт функции, которая получает высоту экрана и делает основной контейнер, высоту МИНУС высоту колонтитула, так что футер остается видно в этом случае, но не привязываются к позиции экрана, как position:fixed будет делать

EDIT пример с содержанием после «сноски», в этом случае я Wouldnt имени элемента колонтитула но то, что вы ищете в основном : https://jsfiddle.net/6jvs0kv3/1/

Answer 2

Попробуйте использовать vh (высота окна просмотра) единиц в элемент родительского обертку:

HTML:

<section> 
    text1 
    <footer>footer text</footer> 
</section> 
<section> 
    text2 
</section> 

CSS:

section { 
    height: 100vh; 
} 
footer { 
    bottom: 0; 
    position: absolute; 
    background-color: yellow; 
} 

http://jsfiddle.net/tzeowruj/

Answer 3

Попробуйте это будет правильно работать

https://jsfiddle.net/jd0Lyewt/enter code here