Question

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:

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

<% 1 > 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;
}

见:"http://jsfiddle.net/knoxxs/6W5uq/19" rel="noreferrer" >JSdidle

如何使页脚固定这个div?

Answer 1

解答: 在您的外部

您的盒子包装框样式 :

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

... 你取出 width , margin s和 position: 的 : : : :



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


在定位  时,您会考虑  边界  的  。

还有一件事: < code> position: mixed  不代表父/ 父, 而是与浏览器窗口相对, 所以在此情况下它不是方法 。

Answer 2

<div id="wrapper">
    <div id= outer_box >
        <div id="box">
            <div id="header">
                <h1>Heading</h1>
            </div>
            <div id="content">
               {text}
            </div>
        </div>
        <div id="footer">
            <p>Fooooooooooooooooooooooooooter</p>            
        </div>
    </div>
</div>

然后在元素中添加一些样式,如下文所示:http://jsfiddle.net/6W5uq/29/

基本上,您使页脚与外部框的底部对齐。我给内容添加了边距, 这样您仍然可以看到滚动时所有的边距, 也可以看到页脚上的边距, 这样您就可以完全使用滚动条。

Answer 3

而不是使用 # footer, 您需要做出某些修改。尝试以下内容 :

In #footer add margin-top:10px; instead of position:absolute; bottom:0px;

define this margin-top to the height you want the footer to be below the "some texts" div. This is happening because the footer is being set to the bottom of the div but as there is more text to come and the overflow is on, it sticks to the bottom of the height of the div rather than the bottom of the content

友情链接