Javascript 可滚动div是否在窗口外显示内容？

我有一个JSFIDLE，我试图理解为什么卷轴超出了de窗口的大小：/

如果我从rightpane类中删除“height:100%”，我就没有卷轴；如果我加上它，我有一个卷轴，但它超出了窗口。我能把滚动限制在窗口吗

提前谢谢

编辑： 只是一个快速更新。。。

---

我更新了小提琴以反映实际问题。我有一个以空间作为标题的图像，它看起来好像没有考虑图像的大小。（我对CSS:P的理解非常糟糕）

您必须定义元素滚动的高度。这就是移除高度时滚动条消失的原因。您还向div添加了填充以及100%的高度。这会增加图元的高度，使其最终比窗高。把高度降低到100%以下，也许是90%，然后玩它。这将允许您保留滚动条并将其保留在窗口内。我有一把小提琴。

您必须定义元素滚动的高度。这就是移除高度时滚动条消失的原因。您还向div添加了填充以及100%的高度。这会增加图元的高度，使其最终比窗高。把高度降低到100%以下，也许是90%，然后玩它。这将允许您保留滚动条并将其保留在窗口内。我有一把小提琴。

元素的总高度（或“外部高度”）等于内部高度（可以在css中指定）+填充+边框

如果使用

高度：100%

但同时添加填充和/或边框，则总高度将大于100%。有一个css属性名为

框大小调整

，它可以帮助您，但它不是交叉的（您猜到了，即元素的总高度（或“外部高度”）等于内部高度（您可以在css中指定）+填充+边框

---

如果使用

height:100%

但同时添加填充和/或边框，则总高度将大于100%。有一个名为

box size

的css属性可以帮助您，但它不会跨越broswer（您猜对了，即好吧，我解决了问题，只是不确定这是否是“正确的方法”。总之，我是这样做的：

在标记之前添加了以下内容：

<script>
    window.onload=setRightPaneHeight; 
</script>

这样做之后，现在页面加载后，将为rightpane分区计算正确的高度。它可以工作：）

---

感谢所有的回答，因为他们让我明白了问题所在！

好的，我解决了问题，只是不确定这是不是“正确的方法”。总之，我是这样做的：

在标记之前添加了以下内容：

<script>
    window.onload=setRightPaneHeight; 
</script>

这样做之后，现在页面加载后，将为rightpane分区计算正确的高度。它可以工作：）

---

感谢所有的答案，因为他们让我明白了问题所在

谢谢你的回答。现在我明白了问题的一部分。我更新了问题，因为我没有正确地将所有内容传递给JSFIDLE，所以问题没有完全解决：/谢谢您的回答。现在我明白了问题的一部分。我更新了问题，因为我没有正确地将所有内容传递给JSFIDLE，所以问题没有完全解决：/谢谢您的回答。现在我明白了问题的一部分。我更新了问题，因为我没有正确地将所有内容传递给JSFIDLE，所以问题没有完全解决：/Yeah如果顶部有图像，就不能将div的高度设置为100%。如果你需要div来占据图片下方所有的垂直空间，这会变得更复杂。谢谢你的回答。现在我明白了问题的一部分。我更新了问题，因为我没有正确地将所有内容传递给JSFIDLE，所以问题没有完全解决：/Yeah如果顶部有图像，就不能将div的高度设置为100%。如果您需要div来占据图像下方的所有垂直空间，那么它会变得更加复杂；我只想添加到您的脚本中：window.onresize=setRightPanehight；