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

我正在页面中央制作一个小 div，它有一个固定的页脚，但该 div 是可滚动的。
根据我的说法，有两种方法可以做到这一点：

1. Using position:fixed：固定位置实际上是相对于浏览器窗口起作用的，但我想要相对于我的小 div 的位置
2. Using 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;
}​

To See: JSfiddle http://jsfiddle.net/knoxxs/6W5uq/19/

如何让这个div的页脚固定？

解决方案：内在你的外在#wrapper，为#box - see http://jsfiddle.net/thebabydino/6W5uq/30/ http://jsfiddle.net/thebabydino/6W5uq/30/

您设计包装盒的样式：

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

……你拿出来width, the margins and position:relative为了#box:

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

...并且您考虑到borders 为#box当定位时#footer.

还有一件事：position: fixed与父级无关，而是与浏览器窗口相关，因此在这种情况下这不是可行的方法。