Question

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

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

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修复页脚？

Answer 1

解决方案：在您的外部#wrapper内，为#box创建另一个包装器 - 请参阅http://jsfiddle.net/thebabydino/6W5uq/30/

您设置包装盒的样式：

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

...您为width取出margin，position:relative和#box：

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

...在定位border时，您会考虑#box的{{1}}。

还有一件事：#footer不是父亲，而是相对于浏览器窗口，所以在这种情况下不是这样。

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/

基本上，您将页脚对齐到outer_box的底部。我已经为内容添加了保证金，因此您在滚动时仍然可以看到所有内容，并且页脚有一个边距，因此您可以完全使用滚动条。

Answer 3

您需要进行某些修改，而不是使用#footer。请尝试以下方法：

在#footer中添加margin-top：10px;而不是位置：绝对; 底部：0像素;

将此margin-top定义为您希望页脚位于“some texts”div下方的高度。发生这种情况是因为页脚设置在div的底部，但是因为有更多文本要出现并且溢出打开，它会粘到div高度的底部而不是内容的底部

固定div中的非滚动页脚？

3 个答案: