粘性页脚与粘性标题？ [英] Sticky footer with sticky header?

问题描述

是否可以使用粘性页眉创建粘性页脚？

Is it possible to make sticky footer with sticky header?

一切都很好，但是当我应用粘性标题时，我需要使 body { padding-top：60px; } ，使其不与内容重叠。

Everything works great but when I apply sticky header I need to make body { padding-top: 60px; } for it to not overlap with content. The problem then is that my footer goes down below the page.

小提琴： http://jsfiddle.net/NFpDG/

<div class="wrap">
  <div class="header">STICKY HEADER</div>
  <div class="content">CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />
  </div>
  <div class="push"></div>
</div>
<div class="footer">STICKY FOOTER</div>

CSS

CSS

html, body, .wrap {
  height: 100%;
}
.wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin-bottom: -60px;
  /* for sticky footer to not go below page */
  padding-top: 60px;
  /* for sticky header to not overlap content */
}
.push, .footer {
  height: 60px;
}
.footer {
  background-color: green;
}
.content {
  background-color: yellow;
}
.header {
  background-color: blue;
  height: 60px;
  width: 100%;
  position: fixed;
  top: 0;
}

推荐答案

将 padding-top：60px; 添加到 .content 而不是 .wrap ？

jsFiddle： http：// jsfiddle .net / NFpDG / 2 /

jsFiddle: http://jsfiddle.net/NFpDG/2/

这篇关于粘性页脚与粘性标题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！