Поддержание нижнего колонтитула внизу

http://jsfiddle.net/W4PKg/

У меня есть страница со схожей структурой:

News:

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

Вот лучшее решение для липкого нижнего колонтитула без позиционирования: http://ryanfait.com/sticky-footer

HTML

  

CSS Sticky Footer

CSS

 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 */ } /* Sticky Footer by Ryan Fait http://ryanfait.com/ */ 

Возможно, попробуйте что-то вроде этого:

HTML

 

CSS

 .page-wrap { min-height: 100%; /* equal to footer height */ margin-bottom: -142px; } .page-wrap:after { content: ""; display: block; } .site-footer, .page-wrap:after { /* .push must be the same height as footer */ height: 142px; } .site-footer { /* footer style */ } 

Вы можете использовать что-то подобное в своем css

 body{ padding-bottom: 40px; } #footer{ position: fixed; /* works fine on ios */ bottom:0; left:0; width:100%; height: 40px; } направо body{ padding-bottom: 40px; } #footer{ position: fixed; /* works fine on ios */ bottom:0; left:0; width:100%; height: 40px; } 

Поэтому я пытался заставить это работать для моей панели уведомлений о файлах cookie, которая обычно помещается в верхней части страницы (см. http://www.corwouters.nl ), причем z-index задает определенный способ это сверху всего, пока не будет уволен. но для iOS я хочу, чтобы он был установлен на дно. поэтому я наткнулся на другой сайт, который заставил это работать с чистым css и без javascript, поэтому я расскажу об этом здесь для всех вас:

 #sticktobottom { position: fixed; top: auto; bottom: 0; } 

* замените #sticktobottom именем вашего div, footer, span или другого элемента, который вы хотите придерживать. Я проверил его и, похоже, работает со всеми основными браузерами, настольными и мобильными устройствами, включая iOS. Также на iOS он будет придерживаться навигационной панели при прокрутке, что является желательным поведением.