如何用CSS实现.aside固定于居中.main右侧 避免视口放大后重叠？

你的问题本质是没有让主内容容器（.main）在视口宽度超过1000px时自动适配剩余空间，导致和固定宽度的.aside重叠。下面给你几个简单可靠的纯CSS方案，按推荐程度排序：

方案1：Flexbox布局（最推荐） #

利用Flex的弹性特性，让.main自动占据剩余宽度，.aside保持固定宽度，完美适配所有≥1000px的视口：

/* 默认移动端隐藏aside */
.aside {
  display: none;
}

/* 桌面端媒体查询（≥1000px） */
@media (min-width: 1000px) {
  /* 给.main和.aside的父容器添加Flex布局 */
  .container {
    display: flex;
    gap: 0; /* 去掉间隙，让二者完全贴合 */
  }
  
  .main {
    flex: 1; /* 关键：占据容器剩余所有宽度 */
    /* 可选：限制.main的最大宽度，避免太宽影响阅读 */
    /* max-width: 800px; */
  }
  
  .aside {
    display: block;
    width: 200px; /* 这里填你的aside实际宽度，比如刚好1000px时main=800px，加起来正好1000px */
  }
}

方案2：Grid布局（简洁直观） #

Grid的列分配逻辑更清晰，适合这种“主内容+侧边栏”的经典布局：

.aside {
  display: none;
}

@media (min-width: 1000px) {
  .container {
    display: grid;
    /* 1fr表示主内容自动占满剩余空间，第二个值是aside固定宽度 */
    grid-template-columns: 1fr 200px;
    gap: 0;
  }
  
  .aside {
    display: block;
  }
}

方案3：绝对定位兼容方案（如果不能改父容器布局） #

如果你的项目结构限制，没法给父容器加Flex/Grid，可以用绝对定位+margin适配：

.aside {
  display: none;
}

@media (min-width: 1000px) {
  /* 给父容器加相对定位，让aside的绝对定位基于它 */
  .container {
    position: relative;
  }
  
  .main {
    width: 100%;
    margin-right: 200px; /* 等于aside的宽度，留出侧边栏空间 */
    box-sizing: border-box; /* 确保padding/border不会突破宽度 */
  }
  
  .aside {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 100%; /* 和.main高度保持一致 */
  }
}

为什么之前会重叠？ #

大概率是你给.main设置了固定宽度（比如800px），当视口宽度超过1000px时，main还是保持800px，而aside如果是固定宽度+绝对定位/浮动，就会出现重叠（或者间隙，视乎你的定位方式）。上面的方案核心就是让.main的宽度随视口动态调整，自动给aside留出空间。

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