CSS，自动溢出，滚动 DIV 而不是整个页面

Question

div 位于另一个 div 下方的简单示例，第一个显示宽度为 100% 的视频，另一个显示内部有一些溢出的文本。我想要的是滚动第二个 div 而不是整个页面：

<div id="bot" style="overflow:auto;">

http://jsfiddle.net/H7uhM/1/

//edit 我删除了 z-index 因为它是主代码的剩余部分。视频的高度可能会有所不同，这就是为什么将 #bot div 设置为恒定高度不是解决方案的原因。视频取决于我在页面高度的 35%-50% 之间的比例。

Answer 1

你需要改变你的风格overflow-y: scroll;，你需要一个高度，否则元素将继续增长以容纳内容。

例子：

<div id="bot" style="overflow-y:scroll; height: 250px;">

此外，z-index 无关紧要

如果你想使用Javascript，你可以像这样实现你想要的效果：

<script>
window.onload = function () { 
    var bot = document.getElementById('bot');
    bot.style.height = (window.innerHeight - document.getElementById('top').offsetHeight) + "px";
}
</script>

JSFiddle