滚动具有绝对位置的内容

Question

我有一个具有固定高度的 div（.outer - 视口），其中包含另一个应该可滚动的 div（.inner - 内容）。 .inner div 使用 bottom: 0 进行绝对定位，以便我们始终可以看到该 div 底部的内容。

问题是，当这个 bottom: 0 添加到 .inner 中时，.outer 的滚动条变成灰色并且不活动。如果我们删除 bottom: 0，滚动条可以工作，但我们会看到 .inner 的顶部，而不是底部。

这是 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/

使用 jQuery在 .outer 的视口中显示 .inner 的底部也是可以接受的。

Answer 1

在您的示例中，外部 div 实际上并未向下滚动。发生的情况是内部 div 相对于外部 div 定位。由于它是 bottom:0，这意味着它填充了整个 div，其余部分溢出到元素上方，因此没有任何内容可以滚动。 （您可以尝试将其设置为 bottom:-10px ，为滚动提供 10 像素的空间。）您

无法单独使用 CSS 设置滚动位置，您需要一些 JavaScript：

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

或者使用 jQuery：

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

Answer 2

实际上，我对你的建议做了进一步的了解，我将 position:absolute 和 bottom: 0 留给了 .inner div（以获得此内容在底部（加载页面时），以防 .inner 的高度低于 .outer），我添加了以下内容：

if($('.outer').outerHeight() < $('.inner').outerHeight()) {
    $('.inner').css("bottom", "auto");
    $('.outer').scrollTop($('.inner').outerHeight());
}

这样我就有了 .inner 显示在底部（如果它的高度小于默认情况下 .outer ），每次将其他内容添加到 .inner div 中时，我都会执行上面的代码，以便在必要时进行实际滚动。

再次非常感谢。 :)