# Using overflow with dynamic height

**URL:** <https://forum.kirupa.com/t/using-overflow-with-dynamic-height/196745>\
**Category:** Uncategorized\
**Created:** [August 10, 2006, 5:43pm UTC](https://forum.kirupa.com/t/using-overflow-with-dynamic-height/196745 "2006-08-10T17:43:01Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![B\_L\_U\_E](https://avatars.discourse-cdn.com/v4/letter/b/ba8739/32.png) [@B\_L\_U\_E](https://forum.kirupa.com/u/B_L_U_E)\
**Post date:** [August 10, 2006, 5:43pm UTC](https://forum.kirupa.com/t/using-overflow-with-dynamic-height/196745/1 "2006-08-10T17:43:01Z")

</div>

as you can see [here](http://www.base04.com/test.html), 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?