CSS实现固定侧边栏布局时元素排列错乱如何解决

• 固定定位的侧边栏脱离普通文档流，底部栏没有预留侧边栏的宽度空间，会被侧边栏遮挡
• 顶部蓝条设置width: 100%，父容器本身有100px左外边距，会导致蓝条宽度溢出视口
• 侧边栏没有明确指定定位偏移值，不同浏览器下可能出现位置偏移
• 主容器没有设置合理的最小高度，内容较少时底部栏位置会错乱

CSS代码 #

body {
  margin: 0;
  min-height: 100vh;
}

.sidebar {
  width: 100px;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  background-color: red;
}

.content {
  margin-left: 100px;
  min-height: calc(100vh - 40px);
}

.top {
  background-color: blue;
  height: 40px;
  color: white;
  line-height: 40px;
}

.footer {
  height: 40px;
  margin-left: 100px;
  background-color: black;
}

HTML代码 #

<div class="sidebar"></div>

<div class="content">
  <div class="top">My website example</div>
  <p>I start here</p>
</div>

<div class="footer"></div>

• 给.sidebar补充top: 0和left: 0属性，明确固定定位的锚点位置，避免浏览器默认偏移
• 删除.top的width: 100%设置，块级元素默认会撑满父容器宽度，不会出现横向溢出
• 给.footer添加margin-left: 100px，和右侧内容区对齐，不会被固定侧边栏遮挡
• 通过calc()计算.content的最小高度，保证内容较少时底部栏也能固定在视口底部，不会出现错位
• 给body设置min-height: 100vh，保证高度计算基准是整个视口高度

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