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

前端之家收集整理的这篇文章主要介绍了css – 修正了div内的非滚动页脚?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

HTML

Box">

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不是相对于父级,而是相对于浏览器窗口,所以在这种情况下不是这样的.

原文链接:https://www.f2er.com/css/427310.html

猜你在找的CSS相关文章