css - 页脚 div 在另一个 div 下，高度为 :100% and scroll,，带 CSS

Question

我有一些 height:100% 的 div，它们包含在这 3 个 div 中:header、main、footer。

(这里你可以看到一个例子:http://i61.tinypic.com/28mjpya.jpg)

在“主要”div 中，我有一个滚动条，我需要它与 height:100%

但是当我对'main' div 执行height:100% 时，我看不到'footer' div。

如果我将使用 position:absulute; 做'footer' div; bottom:0px; 它将隐藏“主”div 的滚动条。

我该如何解决这个问题？

---

这是我的来源: http://jsfiddle.net/8YEJY/

<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;'>
        ccc
    </div>
</div>

Answer 1

您可以固定页眉和页脚，让主体滚动，而不是让内容 div 滚动:

HTML:

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

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

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

CSS:

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

还有一个 demo .

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

将 #content 更改为:

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

检查 updated demo .

注意:除了固定定位，您还可以将 #header、#content 和 #footer 绝对放置，查看此链接。结果是一样的。