如何纯CSS实现元素跨多个div定位并自动调整容器高度

核心需求 #

• 保留原有两个橄榄绿色圆形装饰的样式：顶部圆形左上/右上圆角、居左对齐，底部圆形左下/右下圆角、居右对齐，圆形超出屏幕部分自动裁切
• 薄荷绿色内容卡片叠加在圆形装饰层之上，从顶部圆形起始位置开始排布，一直延伸到底部圆形末端
• 内容高度变化时，两个圆形之间的间距自动适配，无需JavaScript计算、无需给主容器写死固定高度，不会出现内容溢出到圆形外侧的问题

问题根源 #

原实现中给中间内容层设置了absolute定位，导致元素脱离正常文档流，父容器无法被内容自动撑高，只能通过内联样式写死固定高度才能显示完整内容。

最终实现代码（Tailwind CSS） #

<!-- 主容器：无固定高度，完全由内部内容自然撑开 -->
<div class="relative w-full">
  <!-- 顶部圆形装饰层 -->
  <div class="sticky top-0 h-screen w-screen overflow-hidden z-0 pointer-events-none">
    <div 
      class="absolute left-0 top-0 overflow-hidden"
      style="background-color: rgb(115, 108, 64); width: 1312.5px; height: 1312.5px; border-top-left-radius: 9999px; border-top-right-radius: 9999px;"
    ></div>
  </div>

  <!-- 中间内容区 -->
  <div class="relative z-10 -mt-[100vh] flex flex-col items-center w-full bg-purple-500">
    <div class="bg-green-200 m-10 w-full max-w-3xl z-20">
      <p class="p-6">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae
        tempor sem. Morbi tempus ut lacus ac porttitor. Nunc eu condimentum
        felis, et sollicitudin metus. Morbi et nunc quam. Quisque tempor
        tellus dolor. Etiam nunc lectus, pulvinar eu bibendum at, feugiat id
        est. Morbi et sem pharetra, consequat ligula imperdiet, semper
        tellus.
        <!-- 可任意追加文本内容，高度自动撑开 -->
      </p>
    </div>
    <!-- 按相同结构追加更多内容卡片即可，无需调整其他样式 -->
    <div class="bg-green-200 m-10 w-full max-w-3xl z-20">
      <p class="p-6">/* 其他内容块省略 */</p>
    </div>
  </div>

  <!-- 底部圆形装饰层 -->
  <div class="sticky bottom-0 h-screen w-screen overflow-hidden z-0 pointer-events-none">
    <div 
      class="absolute right-0 bottom-0 overflow-hidden"
      style="background-color: rgb(115, 108, 64); width: 1312.5px; height: 1312.5px; border-bottom-left-radius: 9999px; border-bottom-right-radius: 9999px;"
    ></div>
  </div>
</div>

实现逻辑说明 #

• 移除内容层的绝对定位，所有元素默认遵循正常文档流排布，主容器高度完全由中间内容区的实际高度决定，不需要手动写死高度值
• 上下两个圆形装饰使用sticky定位，分别吸附在视口顶部、底部位置，页面滚动时圆形始终保持在视口对应位置，符合设计要求
• 中间内容区添加负外边距-mt-[100vh]，向上偏移1个视口高度，直接叠加在顶部圆形装饰之上，保证内容从顶部圆形位置开始排布
• 层级按优先级划分：装饰圆形层级z-0 < 紫色内容背景层z-10 < 薄荷绿卡片层z-20，确保内容始终显示在装饰上方
• 装饰层添加pointer-events-none属性，避免圆形元素遮挡内容区的点击、hover等交互
• 当内容总高度超过2个视口高度时，文档流自然撑开上下两个sticky装饰层的间距，圆形始终贴在视口上下边缘，不会出现内容溢出圆形外侧的问题

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