左侧侧边栏滚动异常求助：窗口缩小布局混乱、滚动条粘连

问题根源 #

1. 侧边栏使用position: fixed脱离了文档流，主内容仅靠margin-left避让，小屏幕下空间不足时必然重叠。
2. 侧边栏的height: 100%没有正确的父级高度参考，导致overflow-y: scroll无法正常触发。

修改步骤 #

1. 调整HTML结构

添加页面容器包裹侧边栏和主内容，用Flex布局控制整体排列：

<body onload="checkForName()">
  <div class="header">
    <a href="#test" id="nameOfCompany">📄 My Paper Company</a>
    <div class="header-right">
      <a href="#settings">Settings</a>
      <a href="#contact">Contact</a>
      <a href="#donate">Donate</a>
      <div class="flexcolumn"></div>
    </div>
  </div>
  <!-- 新增页面容器 -->
  <div class="page-container">
    <div id="leftmain" class="leftmain">
      <p id="button" onclick='show("htpmain")'>📢 How To Play</p>
      <!-- 可添加更多内容测试滚动效果 -->
      <p>菜单选项1</p>
      <p>菜单选项2</p>
      <p>菜单选项3</p>
      <p>菜单选项4</p>
      <p>菜单选项5</p>
    </div>
    <div id="htpmain" class="main">
      <div class="toptext">
        <h1>📢 How To Play</h1>
        <p>This guide will get you start the game and will be helpful to grasp everything you need to do.</p>
      </div>
      <div class="card"></div>
      <!-- 可添加更多卡片测试页面滚动 -->
      <div class="card"></div>
      <div class="card"></div>
    </div>
  </div>
</body>

2. 修改CSS核心样式

替换原有布局相关代码，解决滚动和重叠问题：

/* 新增页面容器：用Flex实现侧边栏与主内容并排 */
.page-container {
  display: flex;
  flex-wrap: wrap; /* 小屏幕自动换行，避免重叠 */
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  min-height: 100vh; /* 确保页面占满视口高度 */
}

.main {
  flex: 1; /* 主内容占据剩余空间 */
  padding: 0 20px;
  flex-direction: column;
  align-content: center;
  text-align: center;
  min-width: 300px; /* 小屏幕下主内容最小宽度，保证可读性 */
}

.leftmain {
  width: 325px;
  padding: 0 10px;
  background-color: #333333;
  overflow-y: auto; /* 内容溢出时自动显示滚动条 */
  height: calc(100vh - 56px); /* 视口高度减去Header总高度（36px高度+上下10px内边距） */
  flex-shrink: 0; /* 防止侧边栏被压缩变形 */
}

/* 小屏幕响应式调整 */
@media (max-width: 768px) {
  .leftmain {
    width: 100%;
    height: auto;
    max-height: 300px; /* 限制侧边栏最大高度，内容过多时滚动 */
  }
}

/* 其他原有CSS样式保持不变 */

关键修改说明 #

• 移除固定定位：去掉侧边栏的position: fixed，让它回到文档流中，随页面一起滚动，满足“滚动主页面时侧边栏不固定粘连”的需求。
• Flex布局控制排列：用page-container的Flex布局替代margin-left，确保侧边栏和主内容始终合理分配空间，小屏幕自动换行避免重叠。
• 可靠的滚动高度：用calc(100vh - 56px)直接计算侧边栏高度，确保内容超过视口剩余空间时触发滚动，满足“侧边栏内容溢出可滚动”的需求。
• 响应式适配：添加媒体查询，在小屏幕下让侧边栏全屏显示并限制最大高度，提升移动端体验。

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