HTML / Javascript：在页面底部附近隐藏表格行时防止页面移动答案

【问题标题】：HTML / Javascript: prevent page movement when hiding table rows near bottom of pageHTML / Javascript：在页面底部附近隐藏表格行时防止页面移动
【发布时间】：2012-01-28 05:14:41
【问题描述】：

我在 HTML 页面中有一个简单的树表。如果表中的条目有子项，用户可以单击图标来切换子项的可见性。我的页面是这样的：

http://sstree.tigris.org/nonav/example4.html

大多数情况下，您可以将鼠标保持在同一位置，然后根据需要多次单击展开和折叠同一项目。但是，当页面一直滚动到底部并且您折叠某些内容时，该项目会向下移动。这令人沮丧，如果在页面内容下方插入足够的空白空间以防止水平移动，我会更喜欢它。

我想以某种方式可以在页面底部插入一个静态窗口高度边距（如何？）但动态的东西可能会更好（再次，如何？）我很想听听任何人的意见这个问题的优雅解决方案。

【问题讨论】：

标签： javascript html css scroll collapse

【解决方案1】：

如果没有显示正在发生的事情的示例，我不确定如何可视化您的问题，但您可以尝试将整个表格放在一个固定高度的 div 中。如果您可以在 jsfiddle.net 或 pastehtml.com 上向我们展示您的确切问题的示例，我们可能会为您提供进一步的帮助。

编辑：

我不确定这是否是您所说的事物移动的意思，但是当表格折叠时，顶部的示例会移动其下方的所有内容，而底部的示例由于固定的 div 高度而将所有内容保留在原处。对不起，如果这不是你要问的。

http://jsfiddle.net/qZNKU/

http://jsfiddle.net/fACsh/1/

【讨论】：

我无法分享我的真实 HTML，但希望我可以。典型的真实表在完全展开时具有height: 4120px;，在完全折叠时具有height: 102px;。所以折叠时底部会有很多空白空间。