如何调整Fluent UI React Panel高度以适配页面内容区域？

当然可以实现这个需求，你可以通过自定义样式结合动态获取高度的方式，让Panel的高度和content div保持一致，具体方案如下：

方法一：通过React动态计算高度（推荐） #

利用React的ref获取content div的实时高度，再通过Panel的styles属性覆盖默认样式：

import { Panel } from '@fluentui/react';
import { useRef, useEffect, useState } from 'react';

function YourComponent() {
  // 用于获取content元素的ref
  const contentRef = useRef(null);
  // 存储Panel需要的高度
  const [targetHeight, setTargetHeight] = useState('auto');

  // 初始化时获取content高度
  useEffect(() => {
    if (contentRef.current) {
      setTargetHeight(`${contentRef.current.offsetHeight}px`);
    }
    // 如果content高度会动态变化，可以在这里添加监听逻辑（比如resize事件、内容更新回调）
  }, []);

  // 自定义Panel样式
  const customPanelStyles = {
    // 控制Panel内容区域的高度
    main: {
      height: targetHeight,
      overflowY: 'auto' // 内容超出时显示滚动条，避免内容被截断
    },
    // 调整Panel整体定位，避开顶部header
    root: {
      top: '70px' // 这里替换成你实际的header高度
    }
  };

  return (
    <div>
      <div className="header">页面头部</div>
      <div ref={contentRef} className="content">
        {/* 你的页面内容 */}
      </div>
      <Panel
        isOpen={true}
        styles={customPanelStyles}
        headerText="自定义高度面板"
        onDismiss={() => {}}
      >
        {/* Panel内部内容 */}
      </Panel>
    </div>
  );
}

方法二：通过全局CSS类覆盖 #

如果你的场景不需要动态计算高度，可以直接给Panel添加自定义类名，然后在全局CSS中设置固定高度：

/* 全局样式文件 */
.content-height-panel .ms-Panel-main {
  height: 650px; /* 替换为content div的实际高度 */
  overflow-y: auto;
}

.content-height-panel .ms-Panel-root {
  top: 70px; /* 避开顶部header */
}

在组件中使用时：

<Panel
  isOpen={true}
  className="content-height-panel"
  headerText="自定义高度面板"
  onDismiss={() => {}}
>
  {/* Panel内容 */}
</Panel>

从你的附图可以看到，当前Panel默认占据了整个视口高度，通过上述两种方法，就能让Panel高度匹配content区域，同时避开顶部的header部分。

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