固定定位子元素如何设置为父元素100%宽度

问题核心：元素设置position: fixed后会脱离文档流，此时width: 100%会基于浏览器视口计算，而非原有父元素，因此无法匹配父元素max-width:250px的限制。

解决方案 #

直接给固定定位的.side-bar设置明确宽度，匹配父元素的最大宽度限制，同时保留原有折叠逻辑：

修改后的CSS代码

.side-bar {
  background: #1b1a1b;
  backdrop-filter: blur(15px);
  width: 250px; /* 直接设置为父元素的max-width值 */
  max-width: 100%; /* 可选：小屏幕下避免超出视口宽度 */
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0; /* 默认显示在左侧 */
  z-index: 50;
  overflow-y: auto;
  transition: 0.6s ease;
  transition-property: left;
}

.non-active {
  left: -250px; /* 偏移距离与sidebar宽度一致，确保完全隐藏 */
}

子元素宽度适配

如果sidebar内的子元素（如.menu、.item等）需要占满sidebar宽度，只需添加：

.menu, .item {
  width: 100%;
}

原有逻辑保留 #

你的折叠/展开JS代码和HTML结构无需修改，调整上述CSS后即可实现需求：

• 点击关闭按钮时，sidebar向左偏移自身宽度实现隐藏
• 点击菜单按钮时，sidebar回到原位置显示

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