HTML/CSS实现双独立滚动区域：目录（TOC）无法滚动到底部求助

核心问题分析 #

你的目录(#toc)采用固定定位(position: fixed)，但固定高度600px无法适配不同屏幕，且未考虑元素内边距、外边距及浏览器视口的实际可用空间，导致部分列表内容被容器截断，无法通过滚动完全显示。

具体修复步骤 #

• 替换固定高度为视口相对高度，同时预留上下间距避免被浏览器导航栏遮挡：

  #toc {
    width: 30%;
    position: fixed;
    /* 用视口高度减去上下间距，适配不同屏幕尺寸 */
    height: calc(100vh - 40px);
    /* 固定顶部位置，防止内容被顶出视口 */
    top: 20px;
    /* 仅纵向滚动，优化滚动体验 */
    overflow-y: auto;
    /* 清除默认内外边距，避免内容被挤压 */
    margin: 0;
    padding: 0 10px;
    /* 确保内边距不会撑开容器宽度 */
    box-sizing: border-box;
  }
  

• 同步调整内容区布局，避免与目录重叠：

  #post-content {
    width: 70%;
    margin-left: 30%;
    /* 与目录顶部间距对应，保持整体布局协调 */
    padding-top: 20px;
    box-sizing: border-box;
  }
  

额外优化建议 #

• 优化目录滚动条样式（可选）：

  #toc::-webkit-scrollbar {
    width: 6px;
  }
  #toc::-webkit-scrollbar-track {
    background: #f1f1f1;
  }
  #toc::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
  }
  #toc::-webkit-scrollbar-thumb:hover {
    background: #555;
  }
  

• 清除列表默认样式，避免内容偏移：

  #toc ul, #toc li {
    margin: 0;
    padding-left: 15px;
    list-style: none;
  }
  

内容的提问来源于stack exchange，提问作者pmqa