无法让粘性页脚为我的生活工作

Question

我已经尝试了所有 CSS-only 实现似乎存在于 Internet 上的粘性页脚，对于我的生活，我无法弄清楚为什么它不适合我。

问题代码在这里：https://jsfiddle.net/7ck2xk2p/1/

所以问题是页脚仍然位于内容下方，并没有粘在页面底部。

如您所见，我最近的尝试是 Ryan Fait 在此处详述的技术

* {
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 */
}

我是新手，所以如果fiddle有什么不对的地方请见谅。不过，相关细节应该仍然可以区分。

我做错了什么？

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>

无法让粘性页脚为我的生活工作

Can't get a sticky footer working for the life of me

css

sticky-footer