jquery - 如何使“页脚”粘在facebox（jQuery插件）对话框的底部

Question

我正在使用一个名为Facebox的 jQuery 插件来创建包含内容的对话框，当然还会阻止和淡出页面的其余部分。

此插件可以将外部 html 页面应用为如下布局：

<a href="remote.html" rel="facebox">Open Facebox Dialog</a>

我计划将 facebox 对话框设置为固定大小，并且 facebox 最终将包含需要滚动才能访问的内容。

但是，我还希望某些内容始终固定在底部，例如“固定页脚”。

我尝试应用Joseph Silber 的解决方案（如果我想对整个页面执行此操作：fiddle），但它将固定页脚放在对话框之外，位于页面底部：

我还尝试应用RegDwight 的解决方案，它提出了这样的建议：http: //jsfiddle.net/c82ha/2/

这使它正确地固定在底部，但正如小提琴所示，在向下滚动到它之前它不会显示。

我希望它固定在底部，而不管页面其余部分的滚动或大小。

我怎样才能做到这一点？

---

有关的：

• 即使有滚动条，也让 div 始终停留在页面内容的底部
• CSS 将 div 推到页面底部

Answer 1

您是否尝试过在对话中绝对定位页脚？

HTML

<div class="dialogue">
    <div class="content">
        <p>Text</p>
        <p>Text</p>
        <p>Text</p>
        <p>Text</p>
        <p>Text</p>
        <p>Text</p>
        <p>Text</p>
        <p>Text</p>
        <p>Text</p>
        <p>Text</p>
    </div>
    <div class="footer">
        Footer
    </div>
</div>

CSS

.dialogue{
    width: 200px;
    height: 500px;
    position: relative;
    background: red;
}
.dialogue .footer{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #000;
    color: #fff;
}
​

jsFiddle