Проблемы с содержанием нижнего колонтитула ниже содержания

Question

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

Мой макет колонтитула:

#footer 
    #footer-content 
     p.copyright 
     p.credit 
    /#footer-content 
/#footer 

Моя таблица стилей:

#footer { 
    overflow: hidden; 
    clear: both; 
    max-width: 940px; 
    padding-top: 26px; 
    border-top: 1px solid #bbb; 
    color: #aaa; 
    position: fixed; 
    height: 80px; 
    width: 50%; 
    bottom: 0; 
    right: 0; 
    left: 0; 
    margin: 0 auto; 
    padding-bottom: 0; 
    text-align: center; 
} 
#footer-content { 
    width: 100%; 
} 

Настройка положения к абсолютному делает все сноска исчезают где-то на странице, так что я не могу просто изменить.

Что я могу сделать, чтобы подставить нижний колонтитул ниже содержания? Я открыт для любых решений JavaScript.

FIDDLE (Поскольку это WordPress не могу скопировать все)

EDIT:

Сделано несколько изменений. Все еще не меняет мою проблему.

Answer 1

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

#footer{ 
    display: block; 
    text-align: center; 
    font-size: 0.75em; 
    bottom:0; 
    width: 100%; 
    height: 30px; 
    position: fixed; 
} 

Answer 2

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

здесь живая демонстрация того, что это будет делать http://matthewjamestaylor.com/blog/bottom-footer-demo.htm

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

HTML

<div id="container"> 
    <div id="header"></div> 
    <div id="body"></div> 
    <div id="footer"></div> 
</div> 

CSS

html,body { 
    margin:0; 
    padding:0; 
    height:100%; 
} 
#container { 
    min-height:100%; 
    position:relative; 
} 
#header { 
    background:#ff0; 
    padding:10px; 
} 
#body { 
    padding:10px; 
    padding-bottom:60px; /* Height of the footer */ 
} 
#footer { 
    position:absolute; 
    bottom:0; 
    width:100%; 
    height:60px; /* Height of the footer */ 
    background:#6cf; 
} 

Вам нужен контейнер, который будет занимать область просмотра и, установив нижние колонтитулы дел до абсолютного дна контейнера будет на день , контент «тело» будет расширять контейнер по мере необходимости, а нижний колонтитул будет внизу внизу под содержимым каждый раз. divs по умолчанию имеют дисплей: block, поэтому каждый раз они будут нажимать на следующую строку.

Answer 3

Я считаю, что все ваши position: fixed вызывают проблемы, поэтому я пробовал очистить их для вас в этом JSFiddle.

Позиция: фиксированная; устанавливает положение divs относительно окна браузера, а не страницы.

Answer 4

Я внедрил ваш JSFiddle для применения 'sticky footer'.

Ваша структура документа должна была измениться, что:

body 
    #container 
    ...content... 
    #wrap-push 
    #footer 

добавили CSS:

html, body { 
    height: 100%; 
} 
#container 
{ 
    height: 100%; 
    margin-bottom: -107px; 
} 
#wrap_push 
{ 
    height: 107px; 
} 
#footer 
{ 
    height: 80px; 
}