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/