# 헤더 서브메뉴 테마 컴포넌트가 사이드바 하단을 화면 밖으로 밀어냅니다 **URL:** \ **Category:** UX\ **Created:** [2월 17, 2023, 3:55오후 UTC](https://meta.discourse.org/t/header-submenus-theme-component-pushes-bottom-of-sidebar-out-of-the-screen/255496 "2023-02-17T15:55:53Z")\ **Posts on this page:** 1\ **Showing post:** 2
**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\ **Post date:** [2월 17, 2023, 4:46오후 UTC](https://meta.discourse.org/t/header-submenus-theme-component-pushes-bottom-of-sidebar-out-of-the-screen/255496/2 "2023-02-17T16:46:07Z")
> [@RGJ](#): > > CSS 계산이 어딘가에서 잘못된 방향으로 수행되고 있는 것 아닌가요? 커스텀 헤더는 계산에 전혀 포함되지 않습니다. 테마의 `header` 섹션에 아무 콘텐츠나 추가하면 이를 재현할 수 있습니다. 사이드바와 채팅에 사용하는 계산은 Discourse 헤더의 높이를 고려하여 일부 높이를 계산할 때 `--header-offset` 변수를 설정합니다. Discourse 헤더와 달리 커스텀 헤더 콘텐츠는 기본적으로 스크롤 시 고정되지 않으므로, 이를 계산에 포함하는 것은 다소 까다로울 수 있습니다… 기본적으로 계산에 포함하면, 스크롤하여 커스텀 헤더가 사라진 후 높이가 정확하지 않게 됩니다. 예를 들어, 커스텀 헤더의 높이에 따라 `--header-offset`를 수동으로 증가시키면(기본적으로 약 60px입니다), 스크롤 시 사이드바 위에 간격이 생기는 것을 볼 수 있습니다: 커스텀 헤더가 스크롤로 화면 밖으로 나가면 `body`에 `.docked` 클래스를 추가하므로, 이를 활용할 수 있습니다… 이는 더 나은 방법이지만, 사이드바 높이가 상태 간에 조정될 때 눈에 띄는 전환이 발생합니다… 이는 `.docked`가 켜지거나 꺼지는 이진 상태이기 때문입니다. 고정형(sticky) 헤더를 원한다면, 이 문제를 우회하는 것이 약간 더 쉽습니다… 커스텀 헤더의 높이에 따라 `--header-offset`를 증가시키고, `.d-header-wrap`의 top 값을 커스텀 헤더의 높이로 설정하면 됩니다: 비고정형(non-sticky) 헤더의 경우를 개선하기 위해 머릿속에 떠오르는 한 가지 해결책은 다음과 같습니다: 1. 커스텀 헤더의 높이를 확인합니다 2. `--header-offset`에 커스텀 헤더의 높이를 포함합니다 3. 스크롤 위치에 따라 `--header-offset` 계산에 사용된 커스텀 헤더 높이를 단계적으로 감소(de-increment)시킵니다. 이는 `.docked` 클래스가 할 수 없는 방식으로 사이드바 높이를 보다 점진적으로 조정합니다. 정확하게 맞추기 위해서는 몇 가지 실험이 필요할 수 있습니다… --- _[View the full topic](https://meta.discourse.org/t/header-submenus-theme-component-pushes-bottom-of-sidebar-out-of-the-screen/255496)._