Question

我有一些height:100%的div，在这3个div中有：header，main，footer。

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

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

但是当我对'main'div height:100%时，我看不到'页脚'div。

如果我将使用position:absulute; bottom:0px;执行'footer'div，它将隐藏'main'div的滚动条。

我该如何解决这个问题？

<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置于绝对位置，而不是固定定位，请检查此链接。但结果是一样的。

Answer 2

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

Answer 3

您可以使用position:absolute;和#main上的#footer，如下所示：

<强> FIDDLE

我对您的代码做了什么：

删除了内联样式并将它们放入sperate样式表中。这使得代码更清晰，不建议使用内联样式。
删除了第一个容器上的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;
}

在高度为100％的另一个div下的页脚div，并使用CSS滚动

3 个答案: