如何实现主内容区块上方的Sticky导航栏且内容背景撑满页面宽度？

要实现导航栏在内容上方固定、同时内容区块背景撑满页面宽度，只需调整HTML结构和CSS布局：

核心修改点 #

• 把导航栏移到内容区块的上方，而非和内容并排
• 给内容区块的内部文本单独设置容器限制宽度，而非直接给区块加左右padding，这样区块背景就能撑满整个页面宽度
• 保留导航栏的sticky定位，确保滚动时始终可见

修改后的代码 #

HTML #

<header class="header">
  <h1>Header</h1>
</header>
<main class="main">
  <!-- 把导航移到content上方 -->
  <nav class="nav">
    <ul class="navcontent">
      <li>Link 1</li>
      <li>Link 2</li>
      <li>Link 3</li>
    </ul>
  </nav>
  <div class="content">
    <div class="block -b1">
      <!-- 新增内部容器限制文本宽度 -->
      <div class="block-content">
        <h1>My content</h1>
        <p>Integer interdum varius diam. Nam aliquam  velit a pede. Vivamus dictum nulla et wisi. Vestibulum a massa.  Donec vulputate nibh vitae risus dictum varius. Nunc suscipit, nunc  nec facilisis convallis, lacus ligula bibendum nulla, ac  sollicitudin sapien nisl fermentum velit. Lorem ipsum dolor sit  amet, consectetuer adipiscing elit. Nullam commodo dui ut augue  molestie scelerisque. Sed aliquet rhoncus tortor. Fusce laoreet,  turpis a facilisis tristique, leo mauris accumsan tellus, vitae  ornare lacus pede sit amet purus. Sed dignissim velit vitae ligula.  Sed sit amet diam sit amet arcu luctus ullamcorper.</p>
      </div>
    </div>
    <div class="block -b2">
      <div class="block-content">
        <p>Integer interdum varius diam. Nam aliquam  velit a pede. Vivamus dictum nulla et wisi. Vestibulum a massa.  Donec vulputate nibh vitae risus dictum varius. Nunc suscipit, nunc  nec facilisis convallis, lacus ligula bibendum nulla, ac  sollicitudin sapien nisl fermentum velit. Lorem ipsum dolor sit  amet, consectetuer adipiscing elit. Nullam commodo dui ut augue  molestie scelerisque. Sed aliquet rhoncus tortor. Fusce laoreet,  turpis a facilisis tristique, leo mauris accumsan tellus, vitae  ornare lacus pede sit amet purus. Sed dignissim velit vitae ligula.  Sed sit amet diam sit amet arcu luctus ullamcorper.</p>
      </div>
    </div>
    <div class="block -b3">
      <div class="block-content">
        <p>Integer interdum varius diam. Nam aliquam  velit a pede. Vivamus dictum nulla et wisi. Vestibulum a massa.  Donec vulputate nibh vitae risus dictum varius. Nunc suscipit, nunc  nec facilisis convallis, lacus ligula bibendum nulla, ac  sollicitudin sapien nisl fermentum velit. Lorem ipsum dolor sit  amet, consectetuer adipiscing elit. Nullam commodo dui ut augue  molestie scelerisque. Sed aliquet rhoncus tortor. Fusce laoreet,  turpis a facilisis tristique, leo mauris accumsan tellus, vitae  ornare lacus pede sit amet purus. Sed dignissim velit vitae ligula.  Sed sit amet diam sit amet arcu luctus ullamcorper.</p>
      </div>
    </div>
  </div>
</main>
<footer class="footer">
  <h1>Footer</h1>
</footer>

CSS #

.header,
.footer {
  background-color: silver;
  height: 40vh;
}

/* 移除main的flex布局，改为垂直流 */
.main {
  position: relative;
}

.nav > .navcontent {
  position: sticky;
  top: 0;
  /* 给导航加背景色，避免被下方内容遮挡 */
  background-color: #fff;
  padding: 1rem;
  margin: 0;
  list-style: none;
  display: flex;
  gap: 2rem;
}

.content > .block {
  height: 80vh;
  /* 去掉左右padding，让背景撑满宽度 */
  padding: 0;
}

/* 新增内部容器，限制文本宽度并居中 */
.block-content {
  max-width: 60%;
  margin: 0 auto;
  padding: 2rem 0;
}

.content > .block.-b1 {
  background-color: aqua;
}

.content > .block.-b2 {
  background-color: teal;
}

.content > .block.-b3 {
  background-color: blue;
}

效果说明 #

• 导航栏会固定在页面顶部（滚动到main区域后），始终可见
• 每个内容区块的背景色会完全撑满页面宽度
• 文本内容保持在页面中间的固定宽度范围内，排版更美观

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