Using overflow with dynamic height

1

as you can see here, there are two div’s, #main ([COLOR=“SeaGreen”]green[/COLOR]) and #bottom ([COLOR=“Red”]red[/COLOR]). I need [COLOR=“Red”]red[/COLOR] always to remain at the bottom of the user’s screen, I don’t want them to scroll past it. Ok that works. But the height of [COLOR=“SeaGreen”]green[/COLOR] will be based upon the content inside of it, which is different for each page. So if the user shrinks his browser far enough, much of the text in [COLOR=“SeaGreen”]green[/COLOR] becomes hidden. I figure overflow:auto would do the trick by adding vertical scrollbars if [COLOR=“Red”]red[/COLOR] overlaps [COLOR=“SeaGreen”]green[/COLOR], but [COLOR=“SeaGreen”]green’s[/COLOR] height is dynamic. Is there a way to overcome this?