我正在页面的中心做一个小div,它有一个固定的页脚,但div是可滚动的.
据我说,有两种方法可以做到：
>使用位置：固定：固定位置实际上相对于浏览器窗口工作,但我想要相对于我的小div的位置
>使用position：absolute：使用bottom：0;我最初解决了问题但页脚滚动了div文本.
HTML：
@H_403_11@Box">
CSS：
@H_403_11@#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/
你设置你的包装盒的样式：
@H_403_11@.Box-wrap {
width:400px;
height:300px;
margin:100px auto;
position:relative;
}
…你取出#Box的宽度,边距和位置：相对：
@H_403_11@#Box {
height:300px;
margin:0;
border:medium dashed #c00;
overflow:auto;
}
…在定位#footer时,您会考虑#Box的边框.
还有一件事：position：fixed不是相对于父级,而是相对于浏览器窗口,所以在这种情况下不是这样的.
