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

时间:2015-06-19 19:41:12

标签: css sticky-footer

我已经尝试了互联网上存在的每个仅限CSS的粘性页脚实现,而对于我的生活,我无法弄清楚为什么它对我不起作用。

问题代码在这里:Advanced Linux Programming

所以问题是页脚仍然只是坐在内容下面,并没有停留在页面底部。

正如您可能会看到的,我最近的尝试是Ryan Fait在此详述的技术

RTFEditorKit rtf = new RTFEditorKit();
JEditorPane editor = new JEditorPane();
editor.setEditorKit(rtf);
rtf.read(fi, editor.getDocument(), 0);

我很新,所以如果那个小提琴里的东西很乱,请原谅。尽管如此,相关细节仍应有所区别。

我做错了什么?

1 个答案:

答案 0 :(得分:0)

您可以将此方法用于粘性页脚(仅限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>
&#13;
&#13;
&#13;