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

Question

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

5

以下是一个简单的例子，其中一个DIV位于另一个DIV下面，第一个DIV展示了一个100%宽度的视频，而第二个DIV包含一些溢出的文本.. 我想要的是只滚动第二个DIV而不是整个页面：

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

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

//编辑我去掉了z-index，因为它来自于主代码。视频的高度可能会有所不同，所以将#bot div设置为固定高度不是解决方案。视频取决于在页面高度的35％-50％之间的比例。

- Pete Kozak

你可能只需要一个 height 或 max-height。 - OtotheA

我已经添加了一个答案，如果那是你想要的，请告诉我。 :) - Alessandro Incarnati

3个回答

3

您必须给您的#bot div元素设置一个height

- zgood

但是如果不添加高度，是否可能呢？让我们考虑上面的视频可能具有不同的比例。 - Pete Kozak

@PeteKozak 如果不给它设置高度，它怎么知道何时开始滚动？您可以使用 max-height 来设置阈值。或者，如果您想动态设置高度，则可以使用 JavaScript。 - zgood

0

你可以尝试像这样做，给你的 #bot div 添加一个高度属性：

<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/

- Alessandro Incarnati

这就是你想要实现的吗？ :) - Alessandro Incarnati

但如果不添加高度，是否有可能呢？我们考虑到上面的视频可能有不同的比例。是的，但是需要一个更动态的高度……就像将其设置为“自动”一样，但这并没有什么帮助。 - Pete Kozak

好的，所以您需要高度是动态的。让我编辑我的答案。 - Alessandro Incarnati

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- JRulle · Accepted Answer

您需要将样式更改为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