如何实现子导航背景延伸至屏幕边缘且内容保留在容器内？

不用纠结:after的放置问题，直接给子导航容器加全屏背景的伪元素，同时让子内容保持在容器范围内就行，具体实现如下：

HTML结构示例 #

<div class="navbar">
  <div class="container">
    <!-- 主导航项 -->
    <div class="nav-item has-dropdown">
      <a href="#">主菜单</a>
      <!-- 子导航容器 -->
      <div class="dropdown">
        <div class="dropdown-content">
          <!-- 子导航内容 -->
          <a href="#">子菜单1</a>
          <a href="#">子菜单2</a>
          <a href="#">子菜单3</a>
        </div>
      </div>
    </div>
  </div>
</div>

CSS核心代码 #

/* 主容器样式，假设你的容器是固定宽度居中 */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
}

/* 子导航容器，相对定位让伪元素基于它定位 */
.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
}

/* 用伪元素实现全屏蓝色背景 */
.dropdown::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  background-color: #165DFF;
  transform: translateX(-50%);
  z-index: -1;
}

/* 子导航内容，约束在容器范围内 */
.dropdown-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  position: relative;
  z-index: 1;
}

关键逻辑说明 #

• .dropdown设绝对定位，使其相对于主导航项或容器定位，保证子菜单出现在正确位置
• 伪元素:after用100vw实现全屏宽度，通过left:50%+transform: translateX(-50%)让背景居中，避免偏移
• .dropdown-content用和主容器一致的max-width并居中，确保内容约束在容器内，同时通过z-index让内容显示在背景上方

这样既实现了背景延伸到容器外，又让子导航内容和主容器对齐，完全符合需求。

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