另一个div下的页脚div，高度：100%，滚动，带CSS

我有一些高度为100%的div，在这3个div中有：header、main和footer

（这里您可以看到一个示例：）

在“main”分区中，我有一个滚动条，我需要它的高度为100%

但是当我对'main'div执行

height:100%

操作时，我看不到'footer'div

如果我用

位置做'footer'div:absulute；底部：0px它将隐藏“main”div的滚动条

我怎样才能解决这个问题


这是我的消息来源：


aaa
bbb
ccc
只需添加位置：绝对和一些底部边距，我已添加为底部：0%

这个很好用

<div style='position:fixed; left:0px; width:200px; height:100%;'>
    <div id='hearer' style='width:100%; height:40px; background-color:lime;'>
        aaa
    </div>
    <div id='main' style='width:100%; height:100%; overflow:scroll; background-color:green;'>
        bbb
    </div>
    <div id='footer' style='width:100%; height:30px; background-color:pink;position:absolute;bottom:1%;'>
        ccc
    </div>
</div>


aaa
bbb
ccc
您可以使用
位置：绝对#main
和
#footer
上的code>如下所示：


我对您的代码所做的操作：


删除内联样式并将其放入sperate样式表中。这使得代码更干净，不建议使用内联样式
移除<代码>位置：固定
删除了不必要的css属性
将标记更改为HTML5标记
设置
html，body{height:100%；margin:0；}
以便
#wrap
容器可以扩展到窗口高度
height:100%和
位置：相对


HTML:

您可以将页眉和页脚放在固定位置，而不是使content div滚动，让正文滚动：

HTML:

还有一个

[根据您的评论进行编辑]

将内容更改为：

#content {
    width: 100%;
    position: fixed;
    top: 100px;
    bottom: 100px;
    overflow: auto;
    background: lightblue;
}

检查一下

注意：您也可以将
#页眉
、
#内容
和
#页脚
置于绝对位置，而不是固定位置，请检查此链接。虽然结果是一样的。
谢谢，但这不是我需要的，我需要的是“main”分区中的滚动条。如果你知道宽度，只需从页脚上去掉一些，以便可以看到滚动条。。这不是你想要的吗。。？
<div id="wrap">
    <header>aaa</header>
    <main>bbb</main>
    <footer>ccc</footer>
</div>

html,body{
    height:100%;
    margin:0;
}
#wrap {
    width:200px;
    height:100%;
    position:relative;
}
#header {
    height:40px;
    background-color:lime;
}
#main {
    position:absolute;
    width:100%;
    top:40px;
    bottom:30px;
    overflow:scroll;
    background-color:green;
}
#footer {
    position:absolute;
    width:100%;
    bottom:0;
    height:30px;
    background-color:pink;
}

<div id="header">header</div>

<div id="content">content</div>

<div id="footer">footer</div>

html, body { 
    margin: 0; 
    padding: 0;
    height: 100%; /* needs to be set */
}

#header, #footer {
    width: 100%;
    height: 100px; /* needs to be a fixed width! */
    position: fixed;
    top 0;
    background: lightgreen;
}
#footer {
    bottom: 0;
}
#content {
    width: 100%;
    min-height: 100%;
    padding-top: 100px;
    padding-bottom: 100px;
    box-sizing: border-box; /* include the padding in the height */
    -moz-box-sizing: border-box;
    background: lightblue;
}

#content {
    width: 100%;
    position: fixed;
    top: 100px;
    bottom: 100px;
    overflow: auto;
    background: lightblue;
}