如何使标头，页脚和外部div保持固定并使内部div滚动

Question

请查看此http://jsfiddle.net/jaseem/ss7hn/。我要实现的目标是而不是那个内部的滚动栏，我想使用主窗口滚动栏。这样我就可以使用Windows垂直滚动条来浏览" Intercontent"内部的内容，但与此同时，我希望固定外部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名称，您的div名称是contenthorder，因此其#contentholder

尝试这样：

#contentHolder {
 overflow:auto; 
}

或

#contentHolder {
 overflow:scroll; 
}