липкий сноска CSS исправить

Question

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

Я также хочу это на самом деле дно

он отлично работает на этой странице Working link

но когда содержание не занимать всю высоту страницы она Мессинг ... как здесь: At the bottom BUT adding some scrolling at the bottom Я посмотрел вокруг, но не может найти идеальное решение, мне нужны ваши знания

.sticky-footer-wrapper { 
min-height:100%; 
} 

.push { 
overflow:auto; 
padding-bottom:200px; 
} 

footer { 
position:relative; 
margin-top:-200px; 
height:30px; 
clear:both; 
} 

HTML разметка

<div class="sticky-footer-wrapper"> 


<div class="push"></div> 

</div> 

<footer></footer> 

Спасибо за ваше время!

Answer 1

Установите нижний колонтитул в положение: зафиксировано; с нижним значением 0. Вот пример того, что вы ищете. http://jsfiddle.net/t9Acp/

<footer>THis is a </footer> 


    footer { 
     position: fixed; 
     bottom: 0; 
     height: 50px; 
     width: 100%; 
     background: rgba(51,51,51,.5); 
    } 
    body { 
     height: 400em; 
    } 

Answer 2

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

body { 
    padding-bottom:50px; 
} 

footer { 
    height:50px; 
    position:absolute; 
    left:0; 
    bottom:0; 
} 

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

Answer 3

Похоже, что вы после этого: CSS sticky footer

Я столкнулся с подобной проблемой раньше, все CSS должны быть там.

EDIT: ваша обертка содержимого должна иметь отрицательный запас, установленный на ту же высоту, что и нижний колонтитул. Если вы используете прописку, она будет только толкать ее дальше и приводить к большей прокрутке независимо от того, насколько мало содержимого на странице.

Это, вероятно, следует искать что-то вроде этого:

.sticky-footer-wrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -30px; /* the bottom margin is the negative value of the footer's height */ 
} 
footer, .push { 
    height:30px; 
} 

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