1

スティッキー ヘッダーでスティッキー フッターを作成することは可能ですか?

すべてがうまく機能しますが、スティッキー ヘッダーを適用するときはbody { padding-top: 60px; }、コンテンツと重ならないようにする必要があります。問題は、フッターがページの下に表示されることです。

フィドル: http://jsfiddle.net/NFpDG/

HTML

<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

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;
}
4

2 に答える 2

1

の代わりに を追加padding-top: 60px;してみませんか?.content.wrap

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

于 2013-01-14T18:47:34.173 に答える