Sidebar侧边栏收起时内容区没自适应怎么办？

Dev · 心霞提问于 2026-03-25 20:31:25 阅读 3

组件

我做了一个带Sidebar的布局，展开时没问题，但点击收起后主内容区还是原来的位置，留了一大块空白，根本没跟着变宽。试过用CSS的calc()动态算宽度，也加了transition，但效果很奇怪，要么闪一下，要么完全不动。

这是我的基本结构：

<div class="layout">
  <aside class="sidebar" :class="{ 'collapsed': isCollapsed }">
    <ul><li>菜单项</li></ul>
  </aside>
  <main class="content">
    <h1>主内容</h1>
  </main>
</div>

现在就是收起sidebar后，.content 的 left 或 margin-left 没自动调整，感觉像是没监听到类名变化？但控制台看DOM类名其实是变了的……

导航组件

我来解答赞 3 收藏

反馈

1 条解答

司马秀云 Lv1

CSS的话，最简单的办法是用flex布局来搞定这个需求。你的问题其实是sidebar收起时内容区没有跟着调整宽度，这通常是因为定位方式不对。

首先给.layout加上display: flex，然后把.sidebar和.content都设置为flex子元素。这样sidebar收起时，content会自动填充剩余空间。

具体代码可以改成这样：



.layout {

  display: flex;

  height: 100vh;

}



.sidebar {

  width: 240px; /* 默认宽度 */

  transition: width .3s ease;

}



.sidebar.collapsed {

  width: 60px; /* 收起后的宽度 */

}



.content {

  flex: 1; /* 自动填满剩余空间 */

  padding-left: 20px; /* 和sidebar的间距 */

}

JS部分保持原样就行，通过控制collapsed类名来切换sidebar状态。这样写的好处是完全不需要手动去计算宽度或者处理margin，浏览器自己就能帮你算好布局。

说到这个，我以前也老爱用float或者position:absolute做这种布局，结果各种小问题不断。后来用了flex后发现真香，特别是这种需要动态调整宽度的场景，简直不要太省心。

2026-03-25 21:07