固定div内的非滚动页脚? [英] Fixed non scrolling footer inside a div?

问题描述

我正在页面中央制作一个小div，其页脚固定，但div可滚动.
据我说，有两种方法可以做到:

I am making a small div on the center of the page which has a footer which is fixed but the div is scroll-able.
According to me there are two ways to do it:

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

1. Using position:fixed : Fixed position actually work relative to the browser window but I want position relative to my small div
2. Using position:absolute : Using bottom:0; I solved the problem initially but the footer scroll with the div text.

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的页脚固定?

How to make the footer fixed for this div?

推荐答案

解决方案:在外部#wrapper内，为#box创建另一个包装器-请参见

Solution: inside your outer #wrapper, create another wrapper for the #box - see http://jsfiddle.net/thebabydino/6W5uq/30/

您为包装盒设置样式:

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

...取出width，margin s和position:relative作为#box:

... you take out the width, the margins and position:relative for the #box:

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

...，并且在放置#footer时要考虑到#box的border.

... and you take into account the borders for the #box when positioning the #footer.

还有一件事:position: fixed不是相对于父对象，而是相对于浏览器窗口，因此在这种情况下，这不是可行的方法.

One more thing: position: fixed is not relative to a parent, but to the browser window, so it's not the way to go in this case.

这篇关于固定div内的非滚动页脚?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！