How to make a "footer" stick to the bottom of a facebox (jQuery plugin) dialog

Question

I'm using a jQuery plugin called Facebox to create dialogs with content, and of course blocking and fading out the rest of the page.

This plugin can apply an external html page as a layout like this:

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

I plan on having the facebox dialog a fixed size, and the facebox will eventually have content that needs scrolling to access.

However, I also want some of the content to always be fixed to the bottom, like a "fixed footer".

I tried to apply Joseph Silber's solution (which would work if I wanted to do it for an entire page: fiddle), but it puts the fixed footer outside the dialog, on the bottom of the page:

I also tried applying RegDwight's solution, which suggested something like this: http://jsfiddle.net/c82ha/2/

This makes it properly fixed to the bottom, but as the fiddle shows, it isn't shown before you scroll down to it.

I want it fixed to the bottom, regardless of scrolling or size of the rest of the page.

How can I do this?

score 0 · Answer 1 · answered Sep 12 '12 at 19:02

Have you tried to absolute position the footer inside the dialogue?

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

How to make a "footer" stick to the bottom of a facebox (jQuery plugin) dialog

1 Answers1