Как прижать футер в MaterializeCSS?

Question

[Дмитрий Кузнецов]

Имеется css фреймворк materilizecss. Есть футер на сайте, но я хочу что бы он был всегда прижат к низу страницы, в независимости от количества контента, а так же, что бы сам футер не был поверх текста (position: abolute не подходит).

<footer class="page-footer footer-bottom">
    <div class="footer-copyright">
        <div class="container">
            © 2017 Дмитрий Кузнецов</a>
            <a class="grey-text text-lighten-4 right" href="#!">More Links</a>
        </div>
    </div>
</footer>

Как это сделать? Подскажите пожалуйста.

Comments

[Александр Филиппенко]

страницу полностью залейте куда-нибудь

[Дмитрий Кузнецов]

Александр Филиппенко, Вот код: https://jsfiddle.net/am1pcfm6/

Answer 1

[Александр Филиппенко]

https://jsfiddle.net/am1pcfm6/1/
Так не устроит?

Comments

[Дмитрий Кузнецов]

К сожалению нет(

Скрины

PS: скрины кликабельны

[Александр Филиппенко]

Дмитрий Кузнецов, https://jsfiddle.net/am1pcfm6/3/ вот так надо.

[Дмитрий Кузнецов]

Александр Филиппенко, во, идеально! СПАСИБО!!!

Answer 2

[Zbiten]

Как с помощью CSS прижать footer к низу окна браузера

Comments

[Дмитрий Кузнецов]

Ни один из этих методов не привёл к нужному результату.
Был близкий к нужному результату, но футер был выше текста, т.е. перекрывал текст. Мне нужно что бы этот футер был полностью снизу и не "залезал" на другие блоки.

Answer 3

[Kirill_here]

Вообще я обычно делаю так:
для блока с контентом (без шапки и подвала) поставить минимальную высоту с помощью calc
min-height: calc(100vh - X); - там где 'X' сколько то пикселей, просто через инструменты разработчика меняй количество пикселей, пока подвал не встанет ровно и не пропадет скроллбар
Никаких абсолютов и прочих костылей, ничего не наезжает и одним свойством

https://jsfiddle.net/k0adzd6b/3/