Как прижать футер к низу страницы?

Question

[owlblinked]

Ребята, я уже весь гугл обыскала в поисках оптимального для меня решения - ничего не получается. Мне нужно, чтобы футер был прижат к низу страницы, а поле контента заходило сверху на него. При этом, когда увеличивается длина страницы, то трава должна быть прижата к низу.

Comments

[Therapyx]

нарисуйте картинку что именно вы хотите, и приложите код в https://jsfiddle.net/ а то так очень трудно понять, чего же именно вам надо и что у вас не так с кодом.

Answer 1

[Алексей Ермолаев]

Думаю, что здесь может помочь установка минимальной высоты на область контента или на body. Но не в пикселях, а в процентах высоты видимой области, vh (vh - viewport height ). Примерно так:

body {
   min-height: 100vh;
}

Высота видимой области будет рассчитываться автоматически, на весь экран, даже если контента будет одна строчка, и футер будет прижат всегда книзу.

Answer 2

[#rybak]

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

но в вашем случае скорей нужно:
.footer {
width: 100%;
height: 100px;
position: fixed;
bottom: 0;
z-index: -1;
background-image: url(ваша трава);
}

Answer 3

[Глюкъ Виртуален]

Зачем извращения? Назначьте футеру

position: fixed;
    bottom: 0px;

Там есть одна маленькая хитрость, но вы догадаетесь ;)

Answer 4

[Юрий Костин]

ryanfait.com/sticky-footer