另一个高度为 100% 的 div 下的页脚 div 和滚动，使用 CSS答案

【问题标题】：footer div under another div with height:100% and scroll, with CSS另一个高度为 100% 的 div 下的页脚 div 和滚动，使用 CSS
【发布时间】：2014-05-01 07:30:37
【问题描述】：

我有一些带有height:100% 的 div，在这 3 个 div 中包含：页眉、主目录、页脚。

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

在'主' div 中，我有一个滚动条，我需要它与height:100% 一起使用

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

如果我用position:absulute; bottom:0px; 做'footer' div，它将隐藏'main' 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>

【问题讨论】：

如果您知道宽度，只需从页脚中取出一些以便可以看到滚动条。 DEMO..这不是你想要的吗..？

标签： css

【解决方案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 绝对位置，请查看此链接。结果是一样的。

【讨论】：

谢谢，但这不是我需要的，我只需要'主' div 中的滚动条。

【解决方案2】：

您可以像这样在#main 和#footer 上使用position:absolute;：

FIDDLE

我对你的代码做了什么：

删除了内联样式并将它们放在单独的样式表中。这使代码更简洁，不推荐使用内联样式。
删除了第一个容器上的position:fixed;，您的布局不需要它。
删除了不必要的 CSS 属性
将标签更改为 HTML 5 标签
设置html,body{height:100%;margin:0;}，以便#wrap 容器可以扩展到带有height:100%; 和position:relative; 的窗口的高度。

HTML：

<div id="wrap">
    <header>aaa</header>
    <main>bbb</main>
    <footer>ccc</footer>
</div>

CSS：

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

【讨论】：

【解决方案3】：

只需添加位置：绝对和一些底部边距，我已添加为底部：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>

【讨论】：