css - 修复了 div 内的非滚动页脚？

Question

我在页面中心制作了一个小 div，它有一个固定的页脚，但 div 是可滚动的。
在我看来，有两种方法可以做到：

1. 使用position:fixed：固定位置实际上相对于浏览器窗口有效，但我想要相对于我的小 div 的位置
2. 使用position:absolute：使用bottom:0;我最初解决了这个问题，但页脚滚动了 div 文本。

HTML：

<div id="wrapper">
    <div id="box">
        <div id="header">
            <h1>Heading</h1>
        </div>
        <div id="content">
           Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text 
        </div>
        <div id="footer">
            <p>Fooooooooooooooooooooooooooter</p>            
        </div>
    </div>
</div>​

CSS：

#wrapper{
    width:600px;
    height:500px;    
    border:thin solid #c00;
}
#box {
    width:400px;
    height:300px;
    margin:100px auto;            
    border:medium dashed #c00;
    position:relative;    
    overflow:auto;
}
#content {
    background-color:rgba(0,0,208,0.1);   
}
#footer {
    position:absolute;
    bottom:0px;
    width:100%;
    height:50px;
    background-color:rgba(0,0,0,0.8);
    color:#fff;
}​

看：JSfiddle

如何使此 div 的页脚固定？

Answer 1

解决方案：在您的外部#wrapper创建另一个包装器#box- 请参阅http://jsfiddle.net/thebabydino/6W5uq/30/

你设计你的包装盒：

.box-wrap {
    width:400px;
    height:300px;
    margin:100px auto;  
    position:relative;
}

...你取出width, marginsposition:relative和#box:

#box {
    height:300px;
    margin:0;
    border:medium dashed #c00;    
    overflow:auto;
}

...并且您在定位 时将borders考虑在内。#box#footer

还有一件事：position: fixed不是相对于父母，而是相对于浏览器窗口，所以在这种情况下它不是要走的路。

Answer 2

您需要进行某些修改，而不是使用#footer。尝试以下操作：

在 #footer 添加 margin-top:10px; 而不是位置：绝对；底部：0px；

将此 margin-top 定义为您希望页脚低于“一些文本”div 的高度。发生这种情况是因为页脚被设置为 div 的底部，但是由于有更多的文本要出现并且溢出打开，它会粘在 div 高度的底部而不是内容的底部

Answer 3

<div id="wrapper">
    <div id='outer_box'>
        <div id="box">
            <div id="header">
                <h1>Heading</h1>
            </div>
            <div id="content">
               {text}
            </div>
        </div>
        <div id="footer">
            <p>Fooooooooooooooooooooooooooter</p>            
        </div>
    </div>
</div>​

然后为元素添加一些样式，如此处所述：http: //jsfiddle.net/6W5uq/29/

基本上，您使页脚与outer_box 的底部对齐。我为内容添加了边距，因此向下滚动时您仍然可以看到所有内容，并为页脚添加了边距，以便您可以完全使用滚动条。