如何正确实现侧边栏布局？使用position:fixed时出现溢出问题求助

问题根源 #

给.side-bar设置position: fixed后，该元素会脱离文档流，不再参与父级flex布局的空间分配。原本的flex容器会忽略它的宽度，导致.side-menu和.cards-container的宽度累加后超出页面，引发溢出。另外还有一处类名拼写错误（CSS里是.card-container，HTML里是.cards-container），导致卡片容器样式失效。

修复步骤 #

1. 给容器预留侧边栏空间：给.container添加左侧内边距，宽度等于.side-bar的宽度加上它的左右margin，确保其他元素不会被固定定位的侧边栏遮挡，同时避免溢出。
2. 修正侧边菜单的定位：移除.side-menu的position: inherit，让它正常参与flex布局。
3. 修复类名拼写错误：统一CSS和HTML中的卡片容器类名为.cards-container。

修改后的代码 #

CSS代码

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

body {
  background-color: #131211;
}

.container {
  display: flex;
  /* 预留侧边栏的宽度+margin：7% + 1rem（左margin） +1rem（右margin） */
  padding-left: calc(7% + 2rem);
}

.side-bar {
  width: 7%;
  height: 96vh;
  background-color: #201f1e;
  margin: 1rem;
  border: none;
  border-radius: 10px;
  position: fixed;
}

.side-menu {
  width: 20%;
  height: 60vw;
  margin: 7rem 2rem;
  background-color: #323130;
  border-radius: 10px;
}

.cards-container {
  width: 60%;
  height: 100%;
}

HTML代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./styles/style.css">
  <title>ToDo</title>
</head>

<body>
  <div class="container">
    <div class="side-bar">sdasdsad</div>
    <div class="side-menu">sfgfdhsdfh</div>
    <div class="cards-container">sgjdfgjdfjdfjf</div>
  </div>
</body>

</html>

额外优化建议 #

• 可以用vw或者固定值替代百分比宽度，让布局在不同屏幕尺寸下更稳定；
• 给.side-bar添加top: 0和left: 0，确保它始终固定在页面左上角，避免因margin导致的位置偏移；
• 若侧边栏需要随页面滚动保持固定，当前的position: fixed是正确的，但要确保它的层级不会被其他元素覆盖，可添加z-index: 999。

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