在我提出问题之前，我想让您知道您在 JSFiddle 上看到的内容与您在常规浏览器上看到的内容并不准确。您实际上不必在实际浏览器上滚动，并且页脚是固定位置。你有一个页眉和一个固定的页脚，内容 div 是 950 像素，它填补了页眉和页脚之间的空白，没有滚动。
话虽如此，您可以在页眉和页脚之间看到黑色内容 div。我的问题是我将它设置为 950px，它填补了页眉和页脚之间的空白。如果页面上的内容大于我设置的 950px 的大小，我希望我的 div 通过滚动来扩展。有没有办法做到这一点，或者我只需要根据我添加的内容量直接为每个页面设置我的 div 吗？我只希望添加超过 950 像素的滚动功能。
HTML：
<body>
<body>
<div id="page">
<div id="header">
</div>
<div id="main">
</div>
<div id="footer">
<h4>WNG Product Development Engineering (US)</h4>
<a href="">Circuit</a>
<a href="">Contact Us</a>
</div>
</div>
</body>
</body>
CSS：
html, body
{
padding:0;
margin:0;
height:100%;
font-size:1em;
}
#page
{
height:100%;
min-width:960px;
}
#header
{
background-color:#115EA2;
height:100px;
width:100%;
}
#main
{
width:1300px;
background-color:black;
margin: 0 auto;
padding: 20px 20px 40px 20px;
color:#115EA2;
text-decoration:none;
height:950px;
}
#footer
{
position:fixed;
width:100%;
bottom:0;
height: 35px;
background-color:#115EA2;
}
#footer h4
{
font-weight: bold;
font-family: Verdana, Geneva, Arial, sans-serif;
float:left;
color:#fff;
margin: 10px 0 0 20px;
}
#footer a
{
font-weight:bold;
font-family: Verdana, Geneva, Arial, sans-serif;
float:right;
color:#fff;
margin:10px 20px;
text-decoration: none;
}
#footer a:active {color:#fff;}
#footer a:hover {color:#fff;}
#footer a:visited {color:#fff;}