고정 헤더 없이 페이지가 끝없이 확장됩니다

마지막 업데이트 이후 이상한 버그가 발생하는데, 어떻게 디버깅을 이어가야 할지 모르겠습니다. 포럼 링크는 https://community.make.com 입니다. 현재 랜딩 페이지에는 고정 헤더(sticky header)가 적용되어 있고 모든 기능이 정상적으로 작동합니다. 하지만 제가 원했던 것은 랜딩 페이지에 고정 헤더가 아닌 일반 헤더를 사용하는 것이었습니다. 그런데 이제 고정 선언을 비활성화하면:

페이지가 계속 확장되어 푸터에 도달하지 못합니다:

비슷한 레이아웃을 사용하는 다른 페이지에서는 재현이 가능하지만, 다른 인스턴스에서는 재현되지 않습니다. 따라서 제가 테마에서 선언한 무엇인가에 문제가 있는 것 같은데, 무엇일지 감이 잡히지 않습니다. 혹시 추측하시는 분이 있을까요?

운영자 권한을 업데이트하고 이전 해결책을 제거했습니다.

안녕하세요,

이 문제는 --header-offset로 인해 발생하는 것 같습니다. 헤더가 스티키(sticky)가 아닌 경우, 스크롤을 하면 값이 변경됩니다. 해당 페이지에서 동작하려면 --header-offset를 고정해야 할 것 같습니다.

아래와 같이 설정해 볼 수 있습니다:thinking:

html.desktop-view {
  --header-offset: 81px !important;
}

@Don 님, 확인해 주셔서 감사합니다! 저도 동적 헤더 오프셋 선언과 관련이 있을 것 같다고 생각했습니다. 반면에 메타나 다른 인스턴스에서 헤더를 비스틱(non-sticky)으로 변경하면 문제가 발생하지 않습니다. 예를 들어, 이 인스턴스에서는 비슷한 컴포넌트를 사용하고 있지만, 비스틱 헤더를 사용하는 경우에도 페이지가 확장되지 않습니다: https://community.couchers.org/

그래서 여전히 이 다른 테마에서는 왜 그런지 궁금합니다. 또한 헤더 오프셋 값이 실제로 어떻게 계산되고 사용되는지도 궁금합니다.

아… :thinking: 다음 팁 드릴게요 :slightly_smiling_face:

다른 사이트에서도 확인해 봤습니다. 사이드바와 관련된 새로운 변경 사항이 이 문제를 일으키는 것 같습니다.
https://community.couchers.org/ 이 사이트는 사이드바 코드가 포함되지 않은 이전 버전입니다.

.sidebar-wrapper에 height: calc(100vh - var(--header-offset))가 설정되어 있는데, 헤더가 고정(sticky)되지 않은 경우 스크롤 시 콘텐츠가 밀리는 원인이 될 수 있다고 생각합니다.

height: 0; 또는 display: none으로 설정해 보세요.

#main-outlet-wrapper .sidebar-wrapper {
  display: none;
}