css – 修正了div内的非滚动页脚？

我正在页面的中心做一个小div,它有一个固定的页脚,但div是可滚动的.
据我说,有两种方法可以做到：

>使用位置：固定：固定位置实际上相对于浏览器窗口工作,但我想要相对于我的小div的位置
>使用position：absolute：使用bottom：0;我最初解决了问题但页脚滚动了div文本.

HTML：

Box">
        
heading

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,208,0.1);   
}
#footer {
    position:absolute;
    bottom:0px;
    width:100%;
    height:50px;
    background-color:rgba(0,0.8);
    color:#fff;
}​

见：JSfiddle

如何为这个div修复页脚？

最佳答案

解决方案：在你的外部#wrapper中,为#Box创建另一个包装器 – 见http://jsfiddle.net/thebabydino/6W5uq/30/

你设置你的包装盒的样式：

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

…你取出#Box的宽度,边距和位置：相对：

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

…在定位#footer时,您会考虑#Box的边框.

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