Is it possible to pin an HTML element to the bottom of another?

Question

A simple question for a simple problem. I'm working on a way to represent textual documents (such as book pages) with relatively simple HTML underlying them. Each HTML document can display many pages. The biggest problem I've run into is the footer. I want it to be simple, of course; perhaps just a <FOOTER> tag with plain text within it. However, I can't fathom how to force it to stay at the bottom of its page no matter how much text precedes it. Is there any way to pin an HTML element to the bottom of another?

Here's an example:

http://prog.bhstudios.org/documents.htm

position:relative doesn't work because I don't know where the original position of the footer will be, other than "somewhere within its parent".

position:absolute; bottom:0 doesn't work because that's relative to the viewing window's topleftmost position, not to the element's parent

position:fixed; bottom:0 doesn't work because that takes it out of the flow and 'pins' it to the bottom of the viewing window, completely independent of the element's parent.

I want something that works as one would expect float:bottom might work.

Answer 1

I was just working on similar thing:

<div style="position: relative; height: 300px;">
    <h1>some content on top</h1>

    <div style="position: absolute; bottom: 0px; background: #cccccc;">
        this is on bottom!
    </div>
</div>