元素上的溢出滚动

Question

这是我现在所拥有的：

以及它的外观：

<div class="overflow-auto flex flex-col h-full">
      <div class="flex flex-1 flex-col px-7 divide-y-2 divide-metal bg-white">
        <div
          v-for="item in items"
          :key="item.id"
          :item="item"
          class="flex-1 py-4 lg:py-8"
        />
      </div>
      <div class="flex flex-col bg-white lg:bg-gray-light">
        <div class="!bg-white lg:!bg-gray-light lg:border-b-2 lg:border-metal">
          <template #content>
            <h4
              class="h4 uppercase !font-black !text-[26px] 2xl:!text-[36px] leading-10 tracking-[-0.43px]"
              v-text="$t('We Also Recommend')"
            />
          </template>
        </div>
        <div class="flex flex-col px-7 divide-y-2 divide-metal">
          <div
            v-for="product in recommendProducts"
            :key="product.sku"
            :item="product"
            class="flex-1 py-4 lg:py-8"
          />
        </div>
      </div>
    </div>
    <div class="sticky top-0 bottom-auto">
      <div class="p-10">
        <div class="desktop-only flex justify-between items-center pb-10 uppercase">
          <p
            class="subtitle1"
            v-text="$t('Subtotal')"
          />
          <div
            :value="totals.subtotal"
            class="subtitle1"
          />
        </div>
        <div class="flex flex-col">
          <div
            v-text="$t('Proceed to Checkout')"
            class="btn btn--lg btn--black mb-3.5 text-[15px]"
          />
        </div>
      </div>
    </div>
  </div>

问题是底部div 应该覆盖产品，并且产品的“我们也推荐”部分应该有滚动条。现在底部div 延伸到视图之外。在底部div 我有position: sticky 和“我们也推荐”部分overflow: auto。问题出在哪里以及如何解决？

Answer 1

如果我正确理解您的问题，底部的表格确实覆盖了滚动内容的最后一部分，对吗？有一个简单的解决方案：

只需添加

padding-bottom: XXpx; # XX == size of sticky bottom sheet

到滚动容器