I am attempting to make a child div sit fixed at the bottom of its parent div relative to the "div window"; i.e. I want the child div to remain fixed at the bottom of the div whether or not the user scrolls.When there is no content overflow, I am able to accomplish this goal using:HTML:\[code\]<div id="outer"> <div id="inner"></div></div>\[/code\]CSS:\[code\]#outer { position: relative; overflow-y: scroll; color: red;}#inner { bottom: 0; position: absolute; color: blue;}\[/code\]The result is this:
I run into a problem when the content of \[code\]#outer\[/code\] overflows and the user scrolls:
JS Fiddle of Image #2 (overflow using \[code\]<br>\[/code\]).Herein lies my problem: I want \[code\]#inner\[/code\] (the blue box) to remain fixed at the bottom of \[code\]#outer\[/code\] (the red box) regardless of scroll -- an effect similar to using \[code\]position:fixed\[/code\] on a div that has \[code\]height:100%\[/code\]. But I want to achieve the effect using a div that has a set height that is not 100%.I feel like there is a very simple solution to this, but I cannot figure it out.