如何保持頁眉，頁腳和外部div被固定，並使內部div可滾動

Question

請看看這個http://jsfiddle.net/jaseem/sS7HN/。我想要實現的不是內部滾動條，而是想使用主窗口滾動條;因此，我可以使用窗口垂直滾動條瀏覽「innerContent」內的內容，但同時我希望外部div能夠被修復。那可能嗎 ？

CSS：

header { 
    position: fixed; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 50px; 
} 

footer { 
    position: fixed; 
    left: 0; 
    bottom:0; 
    width: 100%; 
} 

content { 
    background-color:#656565; 
    width: 940px; 
    margin:0 auto; 
    padding-top:10px; 
    border-radius:5px; 
} 

mainContent { 
    margin:0px auto; 
    background-color:#515151; 
    width:660px; 
    border-radius:5px; 
    padding-top:20px; 
} 

contentHolder { 
    margin:0 auto; 
    width:616px; 
    background-color:#000000; 
    border-radius:10px; 
    overflow:auto; 
} 

HTML：

<div id="header"></div> 
<div id="content"> 
    <div id="mainContent"> 
     <div id="contentHolder"></div> 
    </div> 
</div> 
<div id="footer"></div> 

Answer 1

這是一個有點不清楚你正在試圖完成的任務，但我沒注意到你缺少哈希標籤在你的CSS。如果您指的是ID屬性，則在標識符前需要#。

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

CSS

#header { 
    position: fixed; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 50px; 
} 

#footer { 
    position: fixed; 
    left: 0; 
    bottom:0; 
    width: 100%; 
} 

#content { 
    background-color:#656565; 
    width: 940px; 
    margin:0 auto; 
    padding-top:10px; 
    border-radius:5px; 
} 

#mainContent { 
    margin:0px auto; 
    background-color:#515151; 
    width:660px; 
    border-radius:5px; 
    padding-top:20px; 
} 

#contentHolder { 
    color:#fff; 
    margin:0 auto; 
    width:600px; 
    height: 400px; 
    background-color:#000000; 
    border-radius:10px; 
    overflow:auto; 
}​ 

Answer 2

你要在這裏給#div名的div名稱是contentHolder所以其#contentHolder

嘗試這樣的div元素：

#contentHolder { 
overflow:auto; 
} 

或

#contentHolder { 
overflow:scroll; 
}