Css 修复了div中不滚动的页脚？

我在页面中央做了一个小div，它有一个固定的页脚，但div可以滚动。
我认为有两种方法可以做到这一点：

使用

position:fixed

：相对于浏览器窗口，fixed position实际上起作用，但我想要相对于我的小div的位置

使用

位置：绝对

：使用

底部：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>​

要查看：

---

如何修复此div的页脚？

解决方案：在外部的

#包装内

，为

#框

创建另一个包装-请参阅

您可以设置包装盒的样式：

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

。。。取出

框的
宽度
、
边距
s和
位置：相对
：

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

。。。在定位
#页脚
时，要考虑
框
的
边框

还有一件事：
position:fixed
不是相对于父级，而是相对于浏览器窗口，因此在这种情况下，这不是解决问题的方法。

<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>​

标题
{text}
fooooooter

​

然后向元素添加一些样式，如下所述：

基本上，您可以使页脚与外部_框的底部对齐。我在内容中添加了边距，这样在向下滚动时您仍然可以看到所有内容，并在页脚添加了边距，以便您可以完全使用滚动条。
您需要进行某些修改，而不是使用#页脚。请尝试以下操作：

在#页脚添加页边距顶部：10px；而不是位置：绝对；
底部：0px

将此页边距顶部定义为希望页脚低于“某些文本”div的高度。
发生这种情况是因为页脚被设置在div的底部，但由于有更多的文本将要出现，并且溢出处于打开状态，页脚会粘附在div高度的底部，而不是内容的底部

<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>​