100％的高度，具有邊距和動態內容

Question

我的項目具有以下要求：

1. 頁眉固定在頁面頂部
2. 內容區域具有白色背景，高度為100％
3. 當內容小於屏幕高度時沒有滾動條
4. 必須支持IE7 +（IE的JS修復是可以的）
5. 當內容高出屏幕高度時，滾動它應停留在白色內容區域內（而不是標題下方）。

這是我的基本HTML：

<div class="wrap">
    <div id="header">header</div>
</div>
<div class="wrap" id="content">content</div>​

CSS：

body{background:#C0DEED url('https://si0.twimg.com/images/themes/theme1/bg.png') repeat-x 0px -80px fixed;}
html,body{height:100%;}
.wrap{width:300px; margin:0 auto;}
#header{position:fixed; background:#aaa; top:10px; width:300px;}
#content{height:100%; background:white; margin-top:40px}

例子： http : //jsfiddle.net/zw3WS/

第一個問題是如何使內容具有100％的高度，不移到標題下方以及仍然沒有不必要的滾動條？

其次，如果內容比屏幕高，我如何使它僅在空白區域滾動，而不允許內容像現在一樣在to條下方滾動？

Answer 1

對於“僅在空白區域”滾動，可以通過設置position: fixed在wrapper元素上，然后將header和content元素絕對定位在其中來實現：

body{
  background:#C0DEED url('https://si0.twimg.com/images/themes/theme1/bg.png') repeat-x 0px -80px fixed;
  overflow: hidden; /* no scrollbars for page body */
}

.wrap {  
  width: 300px;
  position: fixed;
  top: 10px;
  left: 50%; /* for horizontal centering */
  margin-left: -150px; /* for vertical centering */
  bottom: 0;
}

#header{
  position: absolute; 
  background:#aaa; 
  top: 0;
  left: 0;
  right: 0;
}

#content{
  background:white; 
  position: absolute;
  bottom: 0;
  top: 30px;
  left: 0;
  right: 0;
  overflow: auto; /* this makes the scrollbar appear inside #content */
}

演示： http ： //jsbin.com/osipin/1/edit

---

要在頁面正文中滾動，您需要在標記中添加兩個元素：標題的背景和內容的背景。

標題背景的目的是在向下滾動時掩蓋內容，否則內容將顯示在標題下方。 您用來覆蓋內容的內容與頁面背景完全相同。 您必須正確設置此bg元素的大小，以便其填充視口的寬度，並且該高度是內容區域頂部邊緣的高度。 可以使用設置的寬度和margin: 0 auto將實際標頭在此bg元素內水平居中。

內容背景元素應為在內容之前的空元素，並具有固定位置。 其目的是即使內容短於視口高度，也要確保白色區域延伸到頁面底部。

您的新CSS如下所示：

body, .header-bg {
  background:#C0DEED url(https://si0.twimg.com/images/themes/theme1/bg.png) repeat-x 0 -80px fixed;
}

.wrap {
  width:300px;
  margin: 0 auto;
}

.header-bg {
  position: fixed;
  top: 0px;
  left: 0;
  right: 0;
  height: 40px;
}

#header {
  background:#aaa;
  width:300px;
  margin: 10px auto 0;
}

.content-bg {
 background: #FFF;
  position: fixed;
  width: 300px;
  top: 40px;
  bottom: 0;
  z-index: -1;
}

和您這樣的新標記：

<div class="wrap">

  <div class="header-bg">
    <div id="header">header</div>
  </div>

  <div class="content-bg"></div>

    <div id="content">
      CONTENT
    </div>

</div>

演示： http ： //jsbin.com/osipin/4/edit