滚动具有绝对位置的内容

我有一个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的底部也是可以接受的。

来源

2012-02-19 isHristov

在您的示例中，外部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);

来源

2012-02-19 08:44:05 JJJ

这工作令人愉快。 :)你无法想象我多么感激。 – isHristov 2012-02-19 09:43:26

其实我去远一点你建议，我离开position: absolute和bottom: 0到.inner DIV（有底部（当页面加载该内容）的情况下，.inner具有较小高度的.outer）和I加入此：

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

这样我在底部所示的.inner（如果它具有较少的高度，所述.outer）默认和我执行上述每次我的代码将其他内容添加到.inner div以进行实际滚动（如果有必要）。

非常感谢。 :)

来源

2012-02-19 17:15:40 isHristov

滚动具有绝对位置的内容

回答

相关问题