如何实现1个div屏幕居中、1个div居右固定的博客文章页布局

以下是两种兼容现代浏览器的常用实现方案，可根据需求选择：

方案一：Flex + Sticky 定位（适配性最优） #

适合主内容和侧边栏都在页面居中容器内的场景，侧边栏滚动时跟随页面移动

• HTML 结构示例

<div class="page-container">
  <main class="main-content">
    <!-- 此处放博客文章主内容 -->
  </main>
  <aside class="sidebar">
    <!-- 此处放侧边栏内容，比如目录、作者信息、推荐阅读等 -->
  </aside>
</div>

• CSS 代码

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

.page-container {
  display: flex;
  max-width: 1200px; /* 页面整体最大宽度可自行调整 */
  margin: 0 auto;
  gap: 32px; /* 主内容和侧边栏的间距可自行调整 */
  padding: 40px 24px;
}

.main-content {
  flex: 1;
  min-width: 0;
  max-width: 800px; /* 符合阅读体验的主内容宽度一般为600-800px */
}

.sidebar {
  width: 300px; /* 侧边栏固定宽度可自行调整 */
  position: sticky;
  top: 40px; /* 和父容器padding-top保持一致即可 */
  align-self: flex-start; /* 避免侧边栏被拉伸到和主内容同高 */
  height: fit-content;
}

方案二：Fixed 定位（侧边栏贴视口右侧） #

适合需要侧边栏完全固定在视口右侧，不受居中容器限制的场景

• 直接调整CSS即可，HTML结构和方案一一致，也可以单独拆分主内容和侧边栏

.main-content {
  max-width: 800px;
  margin: 40px auto;
  padding: 0 24px;
}

.sidebar {
  position: fixed;
  top: 40px;
  right: calc((100vw - 800px)/2 - 332px); /* 计算逻辑：视口宽度减去主内容宽度的一半，再减去侧边栏宽度+间距，可根据实际数值调整 */
  width: 300px;
  height: calc(100vh - 80px);
  overflow-y: auto; /* 侧边栏内容过多时可内部滚动 */
}

/* 小屏适配，宽度不足时侧边栏调整到主内容下方 */
@media (max-width: 1200px) {
  .sidebar {
    position: static;
    width: 100%;
    max-width: 800px;
    margin: 0 auto 40px;
    padding: 0 24px;
  }
}

以上两种方案的所有宽度、边距、间距数值都可以根据你的设计需求自行调整。

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