Javascript 自动填充浏览器文档高度以滚动到任何元素

我有一个目录，它与一页上的标题相匹配

所需的行为是，当我单击TOC中的任何标题时，要滚动的文档，以便相应TOC单击的标题现在位于浏览器窗口的左上角

问题是，只有当文档的标题下有一整页内容（窗口高度）时，这才有效

• 解决此问题的最佳做法是什么
• 我是否应该自动创建空内容以使文档更大
• 我是否可以检测到这种情况并使文档/视口高度变大
• 有更好的方法吗

---

这里有一个现代浏览器的代码片段
JS:

window.onload=函数（）{
var scrollTop=函数（e）{
如果（e.target.tagName.toLowerCase（）=='li'）{；
document.getElementById（例如target.getAttribute（'show'））.scrollIntoView（true）；
}
返回；
},
调整大小=函数（）{
var s；
document.body.style.height=''；
s=document.body.offsetHeight+window.innerHeight-document.body.lastElementChild.offsetHeight；
if（document.body.style.height

和CSS+HTML进行测试：

#toc {
    cursor: pointer;
}
.content {
    min-height: 100px;
    border: 1px solid #000;
    margin-top: 1em;
}

<ul id="toc">
    <li show="div_1">Header 1</li>
    <li show="div_2">Header 2</li>
    <li show="div_3">Header 3</li>
</ul>
<div id="div_1" class="content">DIV 1</div>
<div id="div_2" class="content">DIV 2</div>
<div id="div_3" class="content">DIV 3</div>

#toc{
光标：指针；
}
.内容{
最小高度：100px；
边框：1px实心#000；
边缘顶部：1米；
}

标题1
标题2
标题3

第一组
第2组
第3组

---

一个在的演示（在JSFIDLE中工作不好，请复制代码并在本地进行测试或其他），因为您没有提供任何代码作为基础，所以这个代码段创建得尽可能短。请不要注意HTML和点击逻辑是如何实现的，而是仔细检查

主体高度是如何以及何时计算的。
HTML{padding bottom:100%；}
？似乎有效！对于单页文档来说，这有点难看，它错误地传达了页面的大小，但我意识到乞丐不能是挑肥拣瘦的人。。。关于如何在javascript中检测这种情况并只应用底部填充的任何想法：当点击标题并确定需要填充时，100%应用底部填充。这太棒了。。。我不配，stackoverflow真的需要给他买个啤酒扣
#toc {
    cursor: pointer;
}
.content {
    min-height: 100px;
    border: 1px solid #000;
    margin-top: 1em;
}

<ul id="toc">
    <li show="div_1">Header 1</li>
    <li show="div_2">Header 2</li>
    <li show="div_3">Header 3</li>
</ul>
<div id="div_1" class="content">DIV 1</div>
<div id="div_2" class="content">DIV 2</div>
<div id="div_3" class="content">DIV 3</div>