Не могу получить липкий нижний колонтитул, работающий на жизнь меня

Question

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

Проблема код здесь: https://jsfiddle.net/7ck2xk2p/1/

Так что проблема колонтитула еще раз сидит по содержанию, и не прилипает к нижней части страницы.

Как вы могли бы быть в состоянии видеть, моя последняя попытка была техника подробно здесь Райан Файт

* { 
margin: 0; 
} 
html, body { 
    height: 100%; 
} 
.wrapper { 
    min-height: 100%; 
    height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */ 
    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 */ 
} 

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

Что я делаю неправильно?

Answer 1

вы можете использовать этот подход для липким колонтитула (только CSS)

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
div { 
 
    min-height: 100%; 
 
    /* equal to footer height */ 
 
    margin-bottom: -70px 
 
} 
 
div:after { 
 
    content: ""; 
 
    display: block 
 
} 
 
footer, 
 
div:after { 
 
    height: 70px 
 
} 
 
footer { 
 
    background: green 
 
}

<div> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dictum vel dolor vel commodo. Nam id nisi eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi commodo leo ac enim molestie, vitae sodales 
 
    dolor consequat. Donec imperdiet orci at luctus lacinia. Donec bibendum velit sed risus eleifend ultricies. Sed nisl massa, ornare quis augue et, faucibus feugiat sapien. Vestibulum pharetra tempor quam eu congue. Proin posuere lorem quis nisl efficitur 
 
    aliquam. Curabitur elit ex, convallis sed fringilla a, varius quis dui. Nullam eget est sed orci imperdiet imperdiet sit amet eget dui. Integer egestas nisi a sagittis rutrum. Quisque id convallis nisl, at blandit nunc. Curabitur elementum viverra tristique. 
 
    In auctor pretium mattis. Fusce vulputate porta lacus tincidunt rhoncus. Aenean dapibus tortor non faucibus laoreet. Morbi fringilla leo nisl, imperdiet hendrerit elit semper at. Donec suscipit orci in nulla viverra ultrices. Donec aliquet risus non 
 
    libero viverra, sed aliquam massa congue. Aliquam suscipit ullamcorper erat sed vehicula. Donec elementum tincidunt dolor, non scelerisque dolor pretium ut. Praesent vitae porttitor turpis, et pharetra libero. Sed imperdiet tempor facilisis. Cras eget 
 
    vehicula dolor. 
 
</div> 
 
<footer> 
 
    Sticky Footer. 
 
</footer>