如何使用CSS设置主内容边距跟随响应式侧边栏宽度自适应变化

目前有两种常用的纯CSS实现方案，适配不同的布局场景：

方案1：Flex弹性布局（最推荐，无额外计算成本） #

如果你的侧边栏和主内容是同级父容器包裹的结构，直接用flex布局即可自动实现宽度联动，不需要手动维护外边距：

示例HTML结构 #

<div class="page-wrapper">
  <aside class="sidebar">侧边栏菜单</aside>
  <main class="content">主内容区域</main>
</div>

对应CSS代码 #

/* 外层容器开启flex布局，占满整个视口 */
.page-wrapper {
  display: flex;
  width: 100vw;
  min-height: 100vh;
}

/* 侧边栏设置默认宽度和过渡效果 */
.sidebar {
  width: 80px; /* 未悬停时的窄宽度，可自定义 */
  background: #2b2b2b;
  color: #fff;
  transition: width 0.3s ease; /* 平滑过渡动画 */
}
/* 侧边栏悬停时修改宽度 */
.sidebar:hover {
  width: 260px; /* 悬停时的展开宽度，可自定义 */
}

/* 主内容设置flex:1自动占满剩余空间 */
.content {
  flex: 1;
  padding: 20px;
  background: #f5f5f5;
  /* 过渡参数和侧边栏保持一致，避免抖动 */
  transition: all 0.3s ease;
}

这个方案的优势是完全由浏览器自动计算空间分配，侧边栏宽度变化时主内容会自动适配，不需要手动写外边距规则。

方案2：CSS变量绑定（适配固定定位侧边栏场景） #

如果你的侧边栏是position: fixed固定在页面左侧的场景，可以通过CSS变量把侧边栏宽度和主内容的外边距绑定，实现联动：

示例CSS代码 #

/* 全局定义侧边栏宽度变量 */
:root {
  --sidebar-width: 80px;
}

.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: var(--sidebar-width);
  background: #2b2b2b;
  color: #fff;
  transition: width 0.3s ease;
}
/* 侧边栏悬停时直接修改CSS变量值 */
.sidebar:hover {
  --sidebar-width: 260px;
}

/* 主内容的左边距直接绑定同一个CSS变量 */
.content {
  margin-left: var(--sidebar-width);
  padding: 20px;
  /* 过渡参数和侧边栏保持一致 */
  transition: margin-left 0.3s ease;
}

• 侧边栏和主内容的过渡时长、缓动函数必须一致，避免出现动画不同步导致的错位抖动
• 如果页面内有其他需要跟随侧边栏宽度调整的元素，都可以直接复用--sidebar-width变量，统一维护更方便

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