以下是一个简单的例子,其中一个DIV位于另一个DIV下面,第一个DIV展示了一个100%宽度的视频,而第二个DIV包含一些溢出的文本.. 我想要的是只滚动第二个DIV而不是整个页面:
<div id="bot" style="overflow:auto;">
//编辑 我去掉了z-index,因为它来自于主代码。 视频的高度可能会有所不同,所以将#bot div设置为固定高度不是解决方案。 视频取决于在页面高度的35%-50%之间的比例。
以下是一个简单的例子,其中一个DIV位于另一个DIV下面,第一个DIV展示了一个100%宽度的视频,而第二个DIV包含一些溢出的文本.. 我想要的是只滚动第二个DIV而不是整个页面:
<div id="bot" style="overflow:auto;">
//编辑 我去掉了z-index,因为它来自于主代码。 视频的高度可能会有所不同,所以将#bot div设置为固定高度不是解决方案。 视频取决于在页面高度的35%-50%之间的比例。
您需要将样式更改为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>
您必须给您的#bot
div元素设置一个height
max-height
来设置阈值。或者,如果您想动态设置高度,则可以使用 JavaScript。 - zgood<div id="bot" style="overflow:auto;z-index:3;height:200px;">
编辑
如果您希望此字幕容器具有流动性,请记住,为了以百分比设置容器的高度,其父容器需要具有明确的高度(例如以像素为单位)。
因此,在这种情况下,您需要以像素为单位设置主容器的高度:
<div id="box" style="height:600px">
然后你可以按百分比设置盒子的高度:
<div id="bot" style="overflow:auto;z-index:3;height:20%;">
您可以在这里测试:http://jsfiddle.net/H7uhM/11/
另外,我建议您摆脱所有这些内联样式的CSS。
HTML用于结构
CSS用于呈现
JS用于行为
将CSS代码与html分开,您的代码将易于修改和重用。
我建议您阅读一些关于CSS特异性概念的内容,之后您将不再使用内联样式。
http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
height
或max-height
。 - OtotheA