如何在多色全屏frame上方实现带max-width的悬浮sticky侧边菜单

核心思路 #

• 侧边栏使用position: sticky替代float，彻底解决内边距导致的移位问题
• 新增全局对齐容器，统一侧边栏与主内容的1100px max-width对齐规则
• 保留每个frame的全屏背景，同时让内部内容与网站整体对齐

修改后的代码 #

CSS

body {
  margin: 0;
}
*, ::before, ::after {
    box-sizing: border-box;
}

/* 全局对齐容器：统一侧边栏和主内容的对齐基准 */
.container-align {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
}

.frame {
  min-height: 100vh;
  width: 100vw;
  padding: 20px 0;
}
.bg-o {
  background: orange;
}
.bg-do {
  background: darkorange;
}

/* 侧边栏样式 */
.sidebar-container {
  position: sticky;
  top: 20px;
  width: 200px;
  margin-right: 40px;
  height: fit-content;
  float: left;
}
.sidebar {
  border-right: 2px solid white;
  padding: 40px 20px;
}

.sidebar-title {
  color: white;
  font-family: 'Asul';
  text-transform: uppercase;
  text-align: center;
  font-size: 1.2em;
}
.side-nav-links {
  display: flex;
  flex-direction: column;
  gap: 20px;
  list-style-type: none;
  padding: 0;
}
.btn-wh-sm {
  background-color: transparent;
  border:  2px solid white;
  width: 170px;
  height: 40px;
  border-radius: 20px;
  padding: 8px 30px 10px 30px;
  text-align: center;
}
.btn-wh-sm a {
  font-size: 1.2em;
  color: white;
  text-decoration: none;
}

/* 主内容区域 */
.frame-content {
  margin-left: 240px; /* 侧边栏宽度+间距的总和 */
}

HTML

<section>
  <!-- 全局对齐容器 -->
  <div class="container-align">
    <!-- 侧边栏 -->
    <aside class="sidebar-container">
      <div class="sidebar">
        <h5 class="sidebar-title">les étapes</h5>
        <nav id="side-nav">
          <ul class="side-nav-links">
            <li class="btn-wh-sm"><a href="#">brief</a></li>
            <li class="btn-wh-sm"><a href="#">recherche</a></li>
            <li class="btn-wh-sm"><a href="#">contenu</a></li>
            <li class="btn-wh-sm"><a href="#">wireframes</a></li>
            <li class="btn-wh-sm"><a href="#">maquettes</a></li>
            <li class="btn-wh-sm"><a href="#">code</a></li>
            <li class="btn-wh-sm"><a href="#">tests</a></li>
          </ul>
        </nav>
      </div>
    </aside>

    <!-- 主内容 -->
    <main>
      <div class="frame bg-o">
        <div class="container-align">
          <div class="frame-content">
            <p>« Lucas et Imane sont amoureux des chats. Ils en possèdent tous les deux depuis leur plus jeune âge. Lorsqu’ils étaient étudiants et qu’ils avaient besoin de rentrer le weekend, ils ont éprouvé plusieurs fois des difficultés pour trouver un système de garde. Après leur diplôme, ils ont donc décider de lancer Homiz</p>
          </div>
        </div>
      </div>
      <div class="frame bg-do">
        <div class="container-align">
          <div class="frame-content">
            <p>La première étape, et surtout incontournable, la recherche ! J’ai basé mes recherches sur les différents sites existants dans le domaine du « pet-sitting » en France, et quelques-uns internationaux. En termes de design et fonctionnalité, les différents sites avaient des bons points et des moins bons points. En termes de positionnement, chacun se différenciait à différents niveaux : la cible (voyageurs, retraités, …) ou les services (garde à domicile, visites à domicile, promenades de chiens …). Le site web Homiz allait se différencier au niveau de sa spécialité : la garde de chats à domicile. </p>
          </div>
        </div>
      </div>
    </main>
  </div>
</section>

关键调整说明 #

1. 新增.container-align类，作为侧边栏和主内容的对齐基准，确保整体内容符合1100px的max-width要求
2. 侧边栏保留float布局的同时，加入position: sticky实现滚动固定，用固定宽度+主内容margin-left控制间距，避免内边距移位
3. 每个.frame保持全屏宽度和背景色，内部通过嵌套.container-align让内容区域与侧边栏对齐
4. 修复了原HTML中缺失的</li>闭合标签

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