Html 使用CSS根据内容扩展div？_Html_Css_Web

Html 使用CSS根据内容扩展div？

html css web

Html 使用CSS根据内容扩展div？,html,css,web,Html,Css,Web,在我提问之前，我想让您知道，您在JSFIDLE上看到的内容与在常规浏览器上看到的内容并不准确。实际上，您不必在浏览器上滚动，而且页脚是固定位置的。你有一个页眉和一个固定的页脚，内容div是950px，它填补了页眉和页脚之间的空白，没有滚动 < >你可以看到页眉和页脚中间的黑色内容div。我的问题是，我把它设置为950px，它填补了页眉和页脚之间的空白。如果页面上的内容大于我设置的950px大小，我希望通过滚动扩展div。有没有办法做到这一点，或者我只需要根据添加的内容量直接为每个页面设置div？

在我提问之前，我想让您知道，您在JSFIDLE上看到的内容与在常规浏览器上看到的内容并不准确。实际上，您不必在浏览器上滚动，而且页脚是固定位置的。你有一个页眉和一个固定的页脚，内容div是950px，它填补了页眉和页脚之间的空白，没有滚动

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

HTML:

您是否尝试过

#main{min height:950px；}

？我用不同的高度更新了JSFIDLE（），并添加了一些内容，以便您可以看到侧边出现了一个滚动条。您可能需要在

#main

的底部添加一个与固定页脚高度相同的边距。

最小高度的实际作用是什么？如果我有超过950px的内容，那么会发生什么@hungerstarIt将完全按照您的要求执行。同时严格按照自己说的去做。它设置块元素的最小高度。块元素可以更大（即内容拉伸它），但它的最小高度将是您为其设置的

min height

，以防您的内容没有填充到

min height

。哦，我认为这是有意义的。我还在学习html和css的过程中哈哈。非常感谢你！！

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

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