固定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时,marginS和position:relative为#box:

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

...并考虑到定位时的borders .#box#footer

还有一件事:position: fixed不是相对于父母,而是相对于浏览器窗口,所以在这种情况下不是这样的.