使用 HTML/CSS 创建目录(高度"infinite")时出现问题

Question

基本上我想要两个具有完全独立卷轴的部分：

• TOC(使用JS从内容中生成H1、H2、H3(
• 内容(文本和图像(

下面是CSS：

#post-content {
width: 70%;
margin-left: 30%;
}
#toc {
width: 30%;
position: fixed;
height: 600px; // this would probably be calculated using the viewport
overflow: scroll;
}

在这个CodePen中，我已经有了基本的HTML/CSS/JS，但由于某种原因，我无法将TOC滚动到底部。也就是说，有更多的UL/LI，但它们没有显示出来。

我很确定我在CSS方面失败了，但我做不好。

有什么需要帮忙的吗？

谢谢！

Answer 1

将#toc的样式更改为：

#toc {
width: 30%;
position: fixed;
height: 100vh;     /* <---- Changed */
overflow: scroll;
top: 0;            /* <---- Added   */
}

或者，如果您不想显示水平滚动条，请按以下调整top

#toc {
width: 30%;
position: fixed;
height: 100vh;     /* <---- Changed */
overflow: scroll;
top: 12px;         /* <---- Added   */
}

Answer 2

我想你可能已经接近了。这在我的大屏幕上适用，但如果我降低窗口的高度，我会遇到问题。

如果窗口的高度小于600px(你设置的高度(，那么你就看不到可滚动toc的底部。尝试添加max-height: 100vh，看看这是否有什么不同。

这样，您可以设置600px的高度，但如果窗口较短，则将最大高度设置为窗口的高度。