Question

I have a div (.outer – the viewport) with fixed height that contains another div (.inner – the content) which should be scrollable. The .inner div is positioned absolute with bottom: 0 so that we can always see what’s on the bottom of this div.

The problem is that when this bottom: 0 is added to .inner, the scrollbar of the .outer becames gray and is not active. If we remove the bottom: 0, the scrollbar works, but we see the top, and not the bottom of the .inner.

This is the HTML:

<div class="outer">
    <div class="inner">
        this content should be scolled to the bottom possibly with bottom: 0; AND we should still have to scrollbar the scroll to the top<br/>
        1<br/>
        2<br/>
        3<br/>
        4<br/>
        5<br/>
        6<br/>
        7<br/>
        8<br/>
        9<br/>
        10<br/>
        11<br/>
        12<br/>
        13<br/>
        14<br/>
        15<br/>
        16<br/>
        17<br/>
        18<br/>
        19<br/>
        20<br/>
        bottom (the scrollbar must be active)
    </div>
</div>​

CSS:

.outer {
    height: 200px; 
    position: relative;
    overflow-y: scroll;
    width:270px;
}
.inner {
    position: absolute;
    bottom: 0px;
    background-color:#aaa;
    width:250px;
}

http://jsfiddle.net/SAyhn/8/

Using jQuery to show the bottom of the .inner in the .outer’s viewport is also acceptable.

Answer 1

The outer div isn’t actually scrolled down in your example. What happens there is that the inner div is positioned in relation to the outer div. Since it’s bottom:0, it means that it fills the entire div and the rest overflows above the element so there’s nothing to scroll. (You can try setting it to bottom:-10px which gives 10 pixels room for a scroll.)

You can’t set the scroll position with CSS alone, you need some JavaScript:

var outer = document.getElementsByClassName( 'outer' );
outer[0].scrollTo( 0, 10000 );​​​  

Or with jQuery:

$( '.outer' ).scrollTop( 10000 );