Как сделать так, чтобы нижний колонтитул прилипал к низу страницы?

Проблема

Как вы можете видеть на веб-сайте выше, нижний колонтитул не прикреплен к нижней части страницы, потому что контента недостаточно. Я хотел бы нижний колонтитул:

  • быть внизу страницы, когда нет прокрутки
  • когда размер окна еще больше уменьшается, я хочу, чтобы мой контент определял минимум (другими словами, нижний колонтитул никогда не должен перекрывать содержимое
  • когда контента много, я хочу, чтобы нижний колонтитул был внизу страницы (не обязательно виден до прокрутки)

Я попытался использовать пример на http://www.cssstickyfooter.com/, но без особого успеха. удалось добраться до чего-то вроде прилипания нижнего колонтитула к нижней части, но он перекрывает содержимое при изменении размера окна.

Может ли кто-нибудь сказать мне, есть ли способ заставить его работать без изменения структуры страницы?

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


css sticky-footer
person antonpug    schedule 21.09.2013    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Попробуйте установить min-height на page

 #page
 {
   min-height:210px;
 }
person Arun Bertil    schedule 21.09.2013

arrow_upward
0
arrow_downward

Как насчет того, чтобы попробовать это: -

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 155px; /* .push must be the same height as .footer */
}

Кредиты за приведенный выше код

Также проверьте ссылки: -

person Rahul Tripathi    schedule 21.09.2013
comment
position: fixed;? Это не то, как работает липкий нижний колонтитул, увеличивайте масштаб и прокручивайте содержимое, вы поймете, о чем я говорил. - person Mr. Alien; 21.09.2013
comment
Таким образом, используя этот метод (метод Fait), я могу добраться до той же точки, что и с помощью метода cssstickyfooter.com (который не требует нажатия), однако в любом случае, если я не изменю страницу (то же самое, что и обертка в вашем примере) в оболочку, на странице нет минимальной высоты, и изменение размера окна делает содержимое нижнего колонтитула:/ - person antonpug; 21.09.2013