Question

我有一个固定的页眉和页脚，高度为50px。但是，当我滚动页面时，页面内容与固定的页眉和页脚重叠。如何在页面滚动到页眉和页脚（顶部50px）时隐藏页面？

这只能在HTML / CSS中完成。如果需要JS或JQ来执行此操作，那么我将忘记这样做。

CSS

 header {
   height: 50px;
   position: fixed;
 }

 .page {
   position: relative;
 }

 .sidebar {
   float: left;
   position: fixed;
   width: 220px;
 }

 .main {
   float: right;
   width: 740px;
 }

 footer {
   position: fixed;
   height: 50px;
 }

HTML

<header>
This content should stay on top.
</header>

<div class="page">
  <div class="sidebar">This content should not move when using scroll bars.</div>
  <div class="main"></div>
</div>

<footer>
This content should stay on bottom.
</footer>

Answer 1

尝试向页脚添加值，例如

bottom: 0;

检查这个小提琴：http://jsfiddle.net/d7T83/

修改

或者您可以为页面元素指定高度

.page { position: relative; display:block; height: 50px; }

Answer 2

<强> Demo

CSS

body, html {
    height: 100%;
    margin:0;
    padding:0;
}
header {
    top:0;
    height: 50px;
    position: fixed;
    left:0;
    right:0;
    background: #ccc;
    z-index:2;
}
.page {
    position: relative;
    background: #eee;
    z-index:1;
    height: 100%;
}
.sidebar {
    left:0;
    position: fixed;
    width: 220px;
    top:50px;
    bottom: 50px;
    background: #ddd;
    height: calc(100% - 100px);
}
.main {
    float: right;
    width: calc(100% - 220px);
    height: 100%;
    background: red;
    margin:50px 0;
}
footer {
    position: fixed;
    height: 50px;
    bottom:0;
    left:0;
    right:0;
    background: #aaa;
    z-index:2;
}

Answer 3

对于标题，只需在页面内容中添加页边距。对于页脚和标题为它们提供一个高于页面div的z-index，以确保它与内容重叠。

     header {
   height: 50px;
   position:fixed;
    top:0px;
    left:0px;
    z-index:4;
    background-color:orange;
 }

 .page {
    margin-top:40px;

}



 .main {
   float: right;
   width: 740px;
 }

 footer {
     position: fixed;
    bottom: 0px;
   height: 50px;
    background-color:orange;
    z-index:4;
 }

DEMO FIDDLE

Answer 4

我认为你要找的是 -

header {
  top: 0;
   height: 50px;
   position: fixed;
   display:block;             /* fill the width */
   z-index:2;                 /* z-index greater than .main */
   width:100%;                /* fill the width */
   background-color: white;   /* To make it opaque */
 }

 .page {
   position: relative;
 }

 .sidebar {
   top: 50px;
   float: left;
   position: fixed;
   width: 220px;
 }

 .main {
   margin-top: 50px;
   float: right;
   left: 220px;
   width: 740px;
   z-index:1;                /* z-index lesser than header and footer */
 }

  footer {
    position: fixed;
    height: 50px;
    bottom: 0;
    display:block; /* fill the width */
    z-index:2;  /* z-index greater than .main */
    width:100%;  /* fill the width */
    background-color: white; /* To make it opaque */
  }

请参阅此处示例 - http://jsfiddle.net/7V57P/5/

固定标题，页面滚动到标题和隐藏

4 个答案: