Bug: Page footer样式问题

[jyqwq]

Version

Vben Admin V5

Describe the bug?

footer层级和table组件有冲突

Reproduction

调整footer层级

System Info

System:
    OS: macOS 15.6
    CPU: (10) arm64 Apple M2 Pro
    Memory: 157.52 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.20.2 - ~/.nvm/versions/node/v18.20.2/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v18.20.2/bin/yarn
    npm: 10.5.0 - ~/.nvm/versions/node/v18.20.2/bin/npm
    pnpm: 10.14.0 - ~/.nvm/versions/node/v18.20.2/bin/pnpm
  Browsers:
    Chrome: 139.0.7258.140
    Safari: 18.6

Relevant log output

Validations

• Read the docs
• Ensure the code is up to date. (Some issues have been fixed in the latest version)
• I have searched the existing issues and checked that my issue does not duplicate any existing issues.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[qianYuanJ]

@jyqwq 可以提供一个最小复现吗

[jyqwq]

  <Page
    auto-content-height
    v-spinning="loading"
    :content-class="showAgree ? 'pb-[110px]' : ''"
    footer-class="z-10"
  >
    <template v-if="!loading">

      <RefundBaseInfo :refund-info="refundInfo" />

      <UserRefundInfo :refund-info="refundInfo" />

      <RefundProcessTable
        v-if="refundInfo.refundSerialCode"
        :refund-serial-code="refundInfo.refundSerialCode"
        :order-code="orderCode"
      />
    </template>
    <template v-if="showAgree" #footer>
      <div class="flex w-full items-center">
        <Textarea
          class="w-full"
          v-model:value="remark"
          placeholder="请输入审核意见"
          :autosize="{ minRows: 3, maxRows: 3 }"
          :maxlength="500"
        />
        <Button class="ml-2" danger @click="agreeBtn(2)" :loading="btnLoading">
          驳回
        </Button>
        <Button
          class="ml-2"
          type="primary"
          @click="agreeBtn(1)"
          :loading="btnLoading"
        >
          同意
        </Button>
      </div>
    </template>
  </Page>

目前我是通过设置footer-class的方式解决的

[qianYuanJ]

@jyqwq page 组件中的 footer 布局是 absolute，page 的高度计算没有减去 footer 高度，所以出现了遮挡的问题，已经为这个问题提了 pr

[qianYuanJ]

但是这样可能会存在另一个问题，就是如果除 footer 之外的空间没有被使用的情况，footer 的显示会出现在屏幕的中间，而不是吸底

[jyqwq]

@qianYuanJ 正常情况的我都会默认给Page组件加上auto-content-height，确保内容不足时至少满屏铺开，如果没用到auto-content-height也可以根据实际业务情况自行调整，所以这个问题其实可以忽略。

[qianYuanJ]

@qianYuanJ 正常情况的我都会默认给Page组件加上auto-content-height，确保内容不足时至少满屏铺开，如果没用到auto-content-height也可以根据实际业务情况自行调整，所以这个问题其实可以忽略。

你是对的，我的考虑是多余的