如何实现高度固定（100%视口高度）且可调整宽度的覆盖式侧边面板？

核心实现思路 #

通过CSS固定定位实现100%视口高度，结合原生resize属性让用户自由调整宽度，再利用层级控制确保面板展开时覆盖下方内容，无需复杂的拆分视图逻辑。

完整代码示例 #

HTML结构 #

<!-- 侧边面板 -->
<div class="sidebar">
  <div class="resize-handle"></div>
  <div class="sidebar-content">
    <h3>侧边面板</h3>
    <p>拖动右侧边缘可调整宽度</p>
  </div>
</div>

<!-- 主内容区域 -->
<main class="main-content">
  <h1>主内容区</h1>
  <p>侧边面板展开时会直接覆盖此区域内容</p>
</main>

CSS样式 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 侧边面板核心样式 */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh; /* 强制占满视口高度 */
  width: 260px; /* 默认初始宽度 */
  background-color: #f5f5f5;
  border-right: 1px solid #ddd;
  z-index: 999; /* 确保面板在主内容上方 */
  overflow: hidden;
  resize: horizontal; /* 原生支持横向调整宽度 */
  min-width: 180px; /* 限制最小宽度，避免过窄 */
  max-width: 80vw; /* 限制最大宽度，避免遮挡过多内容 */
}

/* 调整手柄（提升交互体验） */
.resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 100%;
  background-color: #ccc;
  cursor: ew-resize;
}

.resize-handle:hover {
  background-color: #999;
}

.sidebar-content {
  padding: 20px;
  height: 100%;
  overflow-y: auto; /* 内容超出时可滚动 */
}

/* 主内容区基础样式 */
.main-content {
  padding: 24px;
  margin-left: 260px; /* 初始状态避免被面板遮挡 */
  transition: margin-left 0.2s ease; /* 可选：配合宽度变化的过渡动画 */
}

关键细节说明 #

• 固定定位+100vh：position: fixed保证面板不随页面滚动移动，height: 100vh直接拉满整个视口高度。
• 原生resize属性：无需额外JS即可实现宽度拖拽调整，搭配min-width和max-width可避免宽度调整过度。
• 层级控制：z-index: 999确保面板始终在主内容上方，展开时自然覆盖下方内容。
• 可选优化：如果需要初始隐藏面板，可将默认宽度设为0，再通过按钮点击事件动态修改width值；主内容区的margin-left可根据面板宽度动态调整，避免内容被遮挡。

进阶JS控制（可选） #

如果需要更精细的调整逻辑（比如宽度联动、自定义拖拽反馈），可以监听面板的尺寸变化：

const sidebar = document.querySelector('.sidebar');
const mainContent = document.querySelector('.main-content');

sidebar.addEventListener('resize', () => {
  const currentWidth = sidebar.offsetWidth;
  mainContent.style.marginLeft = `${currentWidth}px`;
  
  // 强制限制宽度范围
  if (currentWidth < 180) {
    sidebar.style.width = '180px';
  } else if (currentWidth > window.innerWidth * 0.8) {
    sidebar.style.width = `${window.innerWidth * 0.8}px`;
  }
});

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