如何保持页眉，页脚和外部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; 
}