css - 固定ヘッダーとフッター

Question

テンプレートに粘着性のあるヘッダーとフッターを設定しようとしていますが、これは機能しますが、id="page" が常にヘッダーの下をスクロールするとは限らないという問題があります。

サイトはこちらhttp://zmgc.net/

例として、タブや "Patricia signed..." ボックス項目など、position="relative" を持つ要素に問題があることがわかりました。

.box ul.supports-list li.last {
   width: 200px;
   position: relative;
   float: left;
}

id="page" を修正して、その中のすべての要素が常にヘッダーとフッターの両方の下をスクロールするようにするにはどうすればよいですか?

Answer 1

次のようにヘッダーの z-index を設定します。

#hd{
z-index: 10000;
}

Answer 2

position:fixed#headerと#footer、およびoverflow:hidden/autobody /＃pageに使用します。

私の例では、ヘッダーとフッターの高さが固定されている必要があります

jsFiddle

body{
  margin:0;
  padding:30px 0 40px 0;
  overflow:hidden;
 }
#header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:40px;
  background: red;
}
#footer{
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  height:60px;
  background: blue;
}
#page{
  overflow:auto;
  height:100%;
  background: green;
} ​