動態高度

在基於窗口滾動的佈局中，將目標的高度與視口和內容高度同步。

角色

FlexLayoutDynamicHeight是為了未指定高度的動態內容而設計的。目標元素的 高度和 最小高度將實際內容高度與視口基準的最小高度同步，幫助穩定計算瀏覽器的 視窗 滾動高度。

主體高度同步

在這個案例中， targetRef如果不傳遞，則錨點的父元素將是 主體目標。

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>
  );
}

特定目標同步

targetRef如果傳遞，則將同步該元素的高度，而非父元素的高度。可以用於使用 window scroll 的 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>
  );
}

測量方式

測量時暫時釋放目標的高度， 自動並計算下一個 scrollHeight, 反映視口高度、內邊距、邊框及最後子元素的底部邊距。當 DOM 變更、調整大小、視覺視口調整/滾動、字體加載完成時，將重新測量。高度和 最小高度計算中。當 DOM 更改、調整大小、視覺視口調整大小/滾動、字型加載完成時會重新測量。

直接操作樣式。

此組件故意更改目標元素的內聯 高度和 最小高度樣式。如果已經有控制相同樣式的代碼，請勿同時應用於相同目標。

屬性

extraHeight

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

extraHeightUnit

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

targetRef

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