Question

在我提出问题之前，我想告诉您，您在JSFiddle上看到的内容与您在常规浏览器上看到的内容不一致。您实际上不必滚动实际浏览器，页脚是固定位置。你有一个标题和一个固定的页脚，内容div是950px填充页眉和页脚之间的间隙，没有滚动。

话虽如此，你可以在页眉和页脚之间的中间看到黑色内容div。我的问题是我将它设置为950px，它填补了页眉和页脚之间的空白。如果页面上的内容大于我设置的950px的大小，我希望通过滚动扩展我的div。有没有办法做到这一点，或者我只需要根据我添加的内容直接为每个页面设置我的div？如果它超过950px，我只希望添加滚动功能。

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;}

Answer 1

你试过#main { min-height: 950px; }吗？我用不同的高度更新了你的jsFiddle（http://jsfiddle.net/Bz6Ja/1/）并添加了一些内容，这样你就可以看到侧面出现滚动条。您可能希望在#main的底部添加一个与固定页脚高度相同的边距。

使用CSS基于内容扩展div？

1 个答案: