Question

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

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

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

//编辑我删除了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

Answer 2

您必须向height div

提供#bot

Answer 3

您可以尝试这样的事情，为#bot div添加一个高度：

<div id="bot" style="overflow:auto;z-index:3;height:200px;">

修改

如果您希望此字幕容器不流畅，请记住，为了以百分比设置容器的高度，其父容器需要具有明确的高度（例如，以px为单位）。

所以你需要在px中设置主容器的高度：

<div id="box" style="height:600px">

然后你可以用百分比设置盒子的高度：

<div id="bot" style="overflow:auto;z-index:3;height:20%;">

您可以在此处测试：http://jsfiddle.net/H7uhM/11/

Ps。另外，我建议你摆脱CSS的所有这些内联样式。
结构的
HTML 用于演示的 CSS
行为的 JS

将CSS代码与html分开，您的代码将易于修改和重复使用。

我建议你阅读一些关于CSS特异性概念的内容，之后你再也不会使用内联样式了。

http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

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

3 个答案: