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％的高度，不在標題下，仍然沒有不必要的滾動條？其次，如果內容比屏幕更高，我將如何僅在白色空間中滾動內容，並且不允許內容像它目前那樣在滾動條下滾動？

Answer 1

滾動「僅在白色空間」，可以通過包裝元素上設置position: fixed做到這一點，那麼絕對定位的標題和內容元素裏面：

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元素的大小，以便填充視口的寬度，並且是內容區域頂部邊距的高度。真正的標題可以使用設置的寬度在此bg元素內水平居中並且可以margin: 0 auto。

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

您新的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