Push Menu实现：如何让body自适应剩余空间而非被移出屏幕

我完全懂你的需求——打开300px宽的侧边菜单后，页面主体不能是被挤到屏幕外看不见，而是要自动收缩到剩余的可视空间里，所有内容都得好好待在视野内对吧？之前那些只偏移body的方案确实坑，我给你一套靠谱的实现方式：

核心思路 #

我们不直接偏移整个body，而是通过给主体内容添加间距+利用盒模型特性，让它自动适配菜单展开后的剩余空间，同时配合菜单的滑入动画，实现流畅的交互。

1. HTML结构示例 #

先搭好基础结构，把菜单和主体分开：

<!-- 侧边菜单 -->
<div class="push-menu">
  <h3>菜单标题</h3>
  <ul>
    <li>菜单项1</li>
    <li>菜单项2</li>
    <li>菜单项3</li>
  </ul>
</div>

<!-- 页面主体内容 -->
<main class="page-body">
  <button id="menu-toggle">打开/关闭菜单</button>
  <h1>页面主内容</h1>
  <p>这里是你的页面内容，菜单展开后这段文字会自动适应剩余宽度，不会跑出屏幕哦～</p>
</main>

2. CSS实现 #

关键是用box-sizing: border-box保证尺寸计算准确，同时给菜单和主体添加过渡动画：

/* 全局重置，确保所有元素尺寸计算统一 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 侧边菜单样式 */
.push-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  height: 100vh;
  background-color: #2d3748;
  color: white;
  padding: 20px;
  /* 默认隐藏在左侧屏幕外 */
  transform: translateX(-100%);
  /* 平滑过渡动画 */
  transition: transform 0.3s ease-in-out;
  z-index: 1000; /* 确保菜单在最上层，不会被内容盖住 */
}

/* 菜单展开状态 */
.push-menu.open {
  transform: translateX(0);
}

/* 页面主体样式 */
.page-body {
  min-height: 100vh;
  padding: 20px;
  background-color: #f7fafc;
  /* 和菜单同步的过渡动画，保证交互流畅 */
  transition: padding-left 0.3s ease-in-out;
}

/* 主体适配菜单展开的状态 */
.page-body.menu-expanded {
  /* 给左侧留出菜单的宽度，内容区域会自动收缩 */
  padding-left: 300px;
}

3. JavaScript控制切换 #

用简单的类切换来控制菜单和主体的状态：

const menuToggleBtn = document.getElementById('menu-toggle');
const pushMenu = document.querySelector('.push-menu');
const pageBody = document.querySelector('.page-body');

menuToggleBtn.addEventListener('click', () => {
  pushMenu.classList.toggle('open');
  pageBody.classList.toggle('menu-expanded');
});

为什么这个方案管用？ #

• 菜单用fixed定位固定在左侧，默认通过translateX(-100%)隐藏，展开时滑入，完全不影响主体的布局流。
• 主体通过padding-left: 300px给菜单腾出空间，加上box-sizing: border-box，这个padding会从主体的内容区域里扣除，而不是额外增加宽度，所以主体内容会自动适配剩余的屏幕宽度，不会溢出。
• 同步的过渡动画让整个交互更自然，没有突兀的跳转感。

额外注意点 #

如果你的页面有固定定位的导航栏，记得给导航栏也加上同样的padding-left过渡效果，不然导航栏会和菜单重叠或者错位哦～

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