알 수없는 가변 높이의 고정 헤더 아래에 오는 내용

Question

<header>은 디스플레이 상단에 position: fixed;입니다.

이것의 자연스러운 결과는 <main>이 상당히 큰 <header>으로 끝나는 것입니다.

저는 전에이 문제에 직면했으며 <main>에 간단한 margin-top 지정으로 문제를 해결했습니다. 여기서 문제는 조금 다릅니다.

<header>의 높이는 다양하고 알 수 없습니다. 상단 및 하단 패딩이 5px이고 하단 여백이 5px입니다. 명시 적으로 자체 높이를 설정하지 않았습니다. 그것은 안에있는 내용에 의해 결정됩니다.

<header>의 가장 큰 요소는 높이가 20vh으로 할당 된 이미지입니다. <h1> 및 <h3>도 있으며, 다시 <vh> 단위로 크기가 조정됩니다. <main>을 오프셋 할 수있는 방법이 없다는 것을 알고 있으므로 항상 동적 크기 인이 응답 형 <header> 아래입니다.

나는 브라우징을 해왔지만 이것을 해결할 수있는 해결책은 하나도 없다. 많은 아이디어는 JavaScript로 창 크기 조정을 잡는 것에 전적으로 의존합니다. 계산 된 헤더 높이를 가져 와서 일치하는 메인의 상단을 할당합니다. JS가 스크롤을 따라 잡을 때이 접근법으로 인해 성능이 저하되고 성가신 페이지 건너 뛰기/도약 등이 발생할 수 있습니다.

응답 설계에서 일반적으로 발생하는 문제는 무엇입니까? 이상적으로, 나는이 문제에 대한 순수한 CSS 해결책, 또는`position : fixed; '에 대한 일종의 해결 방법을 찾고있다. 성능을 저해하지 않는 우아하고 다양한 JS 솔루션입니다. 절대/고정 위치 두통을 해결하려는 나의 일반적인 시도 중 어느 것도 도움을 줄 수 없기 때문에이 문제는 나에게 문제를 일으킨다.

조언을 주시면 감사하겠습니다. -Ilmiont

Answer 1

나는 this post을 확인합니다. 그들은 두 번째 헤더 또는 자바 스크립트를 사용하여 내용을 푸시한다고 언급합니다.

내 생각에 자바 스크립트는 더 깨끗한 접근 방식이므로 서버에 추가 콘텐츠와 불필요한 요청을하지 않아도됩니다.