Have outer div scroll past div inside it with css

I have a div inside another div which has a fi开发者_Python百科xed position at the bottom of the page. I need the outer div to scroll all the way past the inner div allowing all the content to be shown.

.outer{position:relative; }
.inner{position:fixed; bottom:0; z-index:999;}

<div class="outer">
  <p>Lots of content......</p>
    <div class="inner">
      <p>More content fixed in a box at the bottom of the page.....</p>
    </div>
 <div>

Maybe this well help describe it better- http://jsfiddle.net/winchendonsprings/dDgjQ/2/ What I need in this example is the yellow text to scroll all the way to the top of the red box.

You just need to add some padding to the bottom of the div.outer and adjust as necessary for the size of the red div.

In this instance, I did padding-bottom:100px;

http://jsfiddle.net/jasongennaro/dDgjQ/3/

EDIT

To respond to your comment re div.inner not appearing on each page, you could do the following with jQuery:

$('.inner').parent().css('paddingBottom','100px');

Here it is applied: http://jsfiddle.net/jasongennaro/dDgjQ/4/

And here it is with the div.inner removed: http://jsfiddle.net/jasongennaro/dDgjQ/5/

EDIT 2

You could also create another class and only add it to that page.

http://jsfiddle.net/jasongennaro/dDgjQ/6/