React+Ant Design粘性Header动态变高时下方内容被遮挡问题求助

sticky定位的元素默认会保留在正常文档流中的占位，出现下方Content被遮挡的核心原因是Header的实际渲染高度和文档流中的占位高度不一致，常见触发场景包括：Header内部存在浮动、绝对定位等脱离文档流的元素，动态内容渲染滞后导致高度计算晚于Content布局，或者box-sizing配置错误导致padding/border被额外撑高。

方案1：外层加占位容器（优先推荐，无JS侵入） #

给Header组件外层套一个空的占位容器，容器会自动跟随内部Header的实际高度撑开文档流空间，完全适配动态高度场景，不需要修改原有Header的sticky配置：

// 改造后的Header组件
export default function CustomHeader({ children, style, ...rest }) {
  return (
    {/* 占位容器自动跟随内部Header高度撑开文档流 */}
    <div style={{ width: '100%', height: 'fit-content' }}>
      <Header
        className="site-layout-header"
        style={{
          position: "sticky",
          top: 0,
          zIndex: 999,
          width: "100%",
          padding: 30,
          backgroundColor: "#fff",
          ...style,
        }}
        {...rest}
      >
        {children}
      </Header>
    </div>
  )
}

方案2：动态监听Header高度调整Content边距 #

如果不能修改Header组件，可通过ResizeObserver监听Header的实时高度，动态设置Content的上边距规避遮挡：

import { useRef, useState, useEffect } from 'react';

const IncidentProfile = (props: any) => {
  const { record } = props.location?.state || {};
  const [headerHeight, setHeaderHeight] = useState(0);
  const headerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!headerRef.current) return;
    // 监听Header高度变化，动态更新边距
    const resizeObserver = new ResizeObserver((entries) => {
      setHeaderHeight(entries[0].contentRect.height);
    });
    resizeObserver.observe(headerRef.current);
    return () => resizeObserver.disconnect();
  }, []);

  return (
    <>
      <Header ref={headerRef} record={record} />
      <Content
        className="site-layout-background"
        style={{
          padding: 24,
          // 原有24px padding加上Header高度，避免遮挡
          paddingTop: headerHeight + 24,
        }}
      >
        <h1>Incident Profile Page {record?.name}</h1>
      </Content>
    </>
  );
};

方案3：修复Header内部样式问题 #

如果是内部元素脱离文档流导致的高度计算异常，给Header添加对应样式即可解决：

.site-layout-header {
  /* 确保padding和border不会额外撑高元素，高度计算符合预期 */
  box-sizing: border-box;
}
/* 清除内部浮动导致的高度塌陷 */
.site-layout-header::after {
  content: "";
  display: block;
  clear: both;
}

如果使用Ant Design的Layout组件内置滚动容器，需要确保Header和Content处于同一个可滚动的祖先元素下，否则sticky定位的相对容器会异常，也可能出现遮挡问题。

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