feat: 添加 usePageHeight hook 解决当无法约束子元素溢出的问题

[cvpv]

在做数据列表页面的时候，我想实现这样的效果：

• 搜索框和表格标题固定在顶部，不滚动
• 表格内容有 100 条数据时，只让表格内部滚动
• 分页器固定在底部，不滚动
• 不要整页滚动（滚动时顶部导航栏、搜索框都不会被滚走）

但是发现一个问题：虽然h-full能获取当前页面高度，但是当前layout下无法防止页面内容溢出。

<!--  这样写不起作用 -->
<div class="h-full overflow-hide">
  <el-table height="100%">...</el-table>
</div>

创建了一个 usePageHeight hook，它会自动计算出页面内容区的实际可用高度。

在组件中使用：

<script setup>
import { usePageHeight } from "@/layout/hooks/usePageHeight";

const pageHeight = usePageHeight();
</script>

<template>
  <div :style="{ height: pageHeight }" class="flex flex-col">
    <!-- 固定部分：搜索表单 -->
    <div class="shrink-0">
      <SearchForm />
    </div>
    
    <!-- 滚动部分：表格 -->
    <div class="flex-1 overflow-hidden">
      <el-table height="100%" :data="tableData">
        <!-- 100 条数据，只在表格内部滚动 -->
      </el-table>
    </div>
    
    <!-- 固定部分：分页器 -->
    <div class="shrink-0">
      <el-pagination />
    </div>
  </div>
</template>

[cvpv]

或者尝试维护layout，让系统支持下面的布局，这是非常常见的布局:
数据不足的时候自动高度

数据过多的时候固定页脚页头，使用表格内部滚动

[xiaoxian521]

嘿，在组件中使用这里 能否提供完整代码 方便调试也方便后面需要的人进行测试呢

[cvpv]

嘿，在组件中使用这里 能否提供完整代码 方便调试也方便后面需要的人进行测试呢

请问需要怎么补充完成代码，在哪里补充测试用例或者demo？

[cvpv]

在很多实际业务场景中（如 AI 聊天页面，数据大屏），常需固定内容区高度，让内部区域独立滚动而非整页滚动。但本项目因外部已使用 el-scrollbar，在不修改现有 layout 结构的前提下，常规 CSS 方式（如 h-full）无法有效约束内部容器高度、实现子元素溢出滚动。

因此，我采用 JavaScript 动态计算的思路，封装了 usePageHeight hook，精准获取页面内容区的实际可用高度

或许还有别的更好的办法🤔

[xiaoxian521]

比如将下图代码补充完整 直接复制就能复现就方便了