如何创建单侧不受容器限制的响应式网页区块

核心实现思路 #

• 大屏状态（视口宽度大于容器最大宽度+左右内边距）：通过calc()计算左侧偏移量，让区块左侧与下方带container的区块对齐；同时设置position: fixed固定位置，右侧贴合窗口边缘。
• 小屏状态：取消固定定位，让区块自适应宽度，与其他区块保持一致的布局规则。

修改后的完整代码 #

CSS 代码

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

.container {
  width: 100%;
  max-width: 1230px;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.main-section {
  width: 100%;
  height: 100%;
  background-color: red
}

.section-1 {
  height: 600px;
}

.section-1__content {
  height: 600px;
  background-color: green;
}

/* 特殊区块样式 */
.section-2 {
  /* 小屏默认自适应 */
  width: 100%;
  margin-top: 20px; /* 可选，和上方区块拉开间距 */
}

.section-2__content {
  height: 600px;
  background-color: blue;
}

/* 大屏适配（视口宽度大于容器总宽度：1230px + 15px*2 = 1260px） */
@media (min-width: 1260px) {
  .section-2 {
    position: fixed;
    left: calc((100vw - 1230px)/2 + 15px); /* 计算左侧偏移，和container左对齐 */
    right: 0; /* 右侧贴合窗口 */
    width: auto; /* 取消100%宽度，由左右定位自动计算 */
  }
}

HTML 代码

<div class="main-section">
  <div class="section-1">
    <div class="container">
      <div class="section-1__content"></div>
    </div>
  </div>
  <div class="section-2">
    <div class="section-2__content"></div>
  </div>
</div>

关键细节说明 #

• calc((100vw - 1230px)/2 + 15px)：100vw是视口总宽度，减去容器最大宽度1230px后得到左右两侧的留白总宽度，除以2得到单侧留白，再加上容器的左内边距15px，就能让区块左侧和下方container内的内容对齐。
• 媒体查询的断点设为1260px：对应容器最大宽度1230px加上左右各15px的内边距，确保当视口足够大时才触发固定定位。
• 小屏时区块自动恢复为流式布局，和其他区块保持一致的自适应行为。

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