Pin div on bottom of screen or bottom of page, whatever is lower

Question

How can I pin a div to the bottom of screen or bottom of page, whatever is lower?

Ex:

    <div>
      <div>foo</div>
      <div style='position:fixed; bottom:0%'>footer</div>
    <div>

This example keeps the footer pinned to the bottom of the screen, but if foo overflows past the bottom, I want the footer to be below foo. Basically, I want footer either at the bottom of the screen, or the bottom of foo, whichever happens to be greater.

Is there a way to accomplish this?