ความสูงแบบไดนามิก

ในเลย์เอาต์ที่อิงจากการเลื่อนหน้าต่าง จะซิงโครไนซ์ความสูงของ target กับความสูงของ viewport และเนื้อหา

บทบาท

FlexLayoutDynamicHeightถูกออกแบบมาสำหรับเนื้อหาที่มีความสูงไม่ถูกกำหนด เป้าหมายขององค์ประกอบคือ ความสูงและ ความสูงขั้นต่ำซิงโครไนซ์กับความสูงของเนื้อหาจริงและความสูงขั้นต่ำตามมาตรฐาน viewport ของ browser หน้าต่าง ช่วยให้ความสูงของการเลื่อนคำนวณได้อย่างมั่นคง

ซิงโครไนซ์ความสูงของ body

ในกรณีนี้ targetRefหากไม่ส่งมอบ จะใช้ bodyเป็น target

tsx
import {
  FlexLayout,
  FlexLayoutContainer,
  FlexLayoutDynamicHeight,
} from "@byeolnaerim/flex-layout";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ko">
      <body>
        <FlexLayoutDynamicHeight />

        <FlexLayout
          direction="column"
          layoutName="root"
          scrollMode="window"
        >
          <FlexLayoutContainer containerName="head">
            <Header />
          </FlexLayoutContainer>

          <FlexLayoutContainer containerName="body">
            {children}
          </FlexLayoutContainer>
        </FlexLayout>
      </body>
    </html>
  );
}

ซิงโครไนซ์ target เฉพาะ

targetRefหากส่งมอบ จะซิงโครไนซ์ความสูงของ element นั้น ไม่ใช่ parent สามารถใช้กับ element ที่ต้องการทำให้ความสูงของ scroll เสถียรในเนื้อหาความสูงแบบไดนามิกที่ไม่กำหนดความสูง (auto) เช่น shell, portal root, หรือเอกสารแยกต่างหากได้

tsx
"use client";

import { FlexLayoutDynamicHeight } from "@byeolnaerim/flex-layout";
import { useRef } from "react";

export default function DocumentShell({ children }: { children: React.ReactNode }) {
  const shellRef = useRef<HTMLDivElement | null>(null);

  return (
    <div ref={shellRef}>
      <FlexLayoutDynamicHeight targetRef={shellRef} />
      {children}
    </div>
  );
}

วิธีการวัด

ในระหว่างการวัด จะปล่อยความสูงของ target ชั่วคราว autoและ scrollHeight, คำนวณความสูงถัดไปโดยสะท้อนความสูงของ viewport, padding, border, และ bottom margin ของ child ตัวสุดท้ายความสูงและ ความสูงขั้นต่ำจะทำการวัดใหม่เมื่อมีการเปลี่ยนแปลง DOM, เปลี่ยนขนาด, เปลี่ยนขนาด/เลื่อน visualViewport, หรือโหลดฟอนต์เสร็จสิ้น

props

extraHeight

계산된 height에 추가로 더할 값입니다. 기본값은 0입니다.

extraHeightUnit

extraHeight의 단위입니다. px 또는 %를 사용할 수 있으며 기본값은 px입니다.

targetRef

height/minHeight를 동기화할 target element ref입니다. 생략하면 anchor의 parent element를 사용합니다.

© 2026 Byeolnaerim. สงวนลิขสิทธิ์.แนะนำนโยบายการจัดการข้อมูลส่วนบุคคล