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），并且每当我向{{1}添加其他内容时执行上面的代码如果有必要，div可以进行实际滚动。

再次非常感谢。：）

滚动具有绝对位置的内容

2 个答案: