如何在Elementor中让第二个内部区块铺满全屏？

假设你的HTML结构如下：

<div class="main-container">
  <!-- 常规受限宽度区块 -->
  <div class="content-section">
    <!-- 这里是普通内容 -->
  </div>
  
  <!-- 需要全屏的地图区块 -->
  <div class="map-section">
    <div class="map-container">
      <!-- 地图嵌入代码或容器 -->
    </div>
  </div>
  
  <!-- 其他常规受限宽度区块 -->
  <div class="content-section">
    <!-- 这里是普通内容 -->
  </div>
</div>

用以下CSS就能实现需求：

/* 主容器：限制最大宽度，水平居中 */
.main-container {
  max-width: 1200px; /* 可根据需求调整 */
  margin: 0 auto;
}

/* 常规内容区块：保持主容器的宽度限制 */
.content-section {
  padding: 2rem;
}

/* 地图区块：突破主容器宽度，铺满全屏 */
.map-section {
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

/* 地图内部容器：可选，用于给地图内容添加内边距或限制最大宽度 */
.map-container {
  max-width: 1920px; /* 可选，防止地图内容在超大屏幕上过度拉伸 */
  margin: 0 auto;
  padding: 1rem;
  height: 450px; /* 根据需求设置地图高度 */
}

核心原理 #

calc(-50vw + 50%)是关键：

• 50vw代表当前视口宽度的一半
• 50%是主容器自身宽度的一半
• 通过负margin将地图区块的左右边缘拉至视口两侧，实现全屏效果

如果主容器带有左右内边距，需要调整calc公式。比如主容器有padding: 0 1.5rem，则margin-left应改为calc(-50vw + 50% + 1.5rem)，margin-right同理。

兼容旧浏览器的备选方案 #

如果需要兼容不支持calc的旧版浏览器，可改用绝对定位方案：

.map-section {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 450px;
}

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