Dynamic Height
window scroll 기반 layout에서 target의 높이를 viewport와 content 높이에 맞춰 동기화합니다.
역할
FlexLayoutDynamicHeight는 height가 지정되지 않는 동적 컨텐츠를 위해 작업되었습니다. 대상 element의 height와 minHeight를 실제 content 높이와 viewport 기준 최소 높이에 맞춰 동기화해, browser의 window scroll 높이가 안정적으로 계산되도록 돕습니다.
body 높이 동기화
이 사례에서는 targetRef를 전달하지 않으면 anchor의 parent element인 body가 target이 됩니다.
특정 target 동기화
targetRef를 전달하면 parent가 아닌 해당 element의 높이를 동기화합니다. window scroll을 쓰는 shell, portal root, 별도 document 영역처럼 height가 지정되지 않는(auto) 동적 높이 컨텐츠에서 scroll height를 안정화해야 하는 element에 사용할 수 있습니다.
측정 방식
측정 시 target의 높이를 잠시 auto로 풀고, scrollHeight, viewport 높이, padding, border, 마지막 child의 bottom margin을 반영해 다음height와 minHeight를 계산합니다. DOM 변경, resize, visualViewport resize/scroll, font loading 완료 시 다시 측정합니다.
height와 minHeight를 의도적으로 변경합니다. 이미 같은 style을 직접 제어하는 코드가 있다면 같은 target에 동시에 적용하지 마십시오.props
extraHeight
계산된 height에 추가로 더할 값입니다. 기본값은 0입니다.
extraHeightUnit
extraHeight의 단위입니다. px 또는 %를 사용할 수 있으며 기본값은 px입니다.
targetRef
height/minHeight를 동기화할 target element ref입니다. 생략하면 anchor의 parent element를 사용합니다.