HTML 및 CSS가있는 동적 크기의 끈적 끈적한 사이드 바

HTML 및 CSS를 사용하여 뷰포트 크기에 적응하는 끈적 끈적한 사이드 바를 만듭니다. position: sticky 하고 방향 오프셋 설정 ( top: 0 )을 사용하면 점프 투-체인 메뉴 또는 섹션 제목과 같은 기능을 쉽게 구현할 수 있습니다. 보다 고급 스티커 포지셔닝 기술을 보려면 CSS 트릭과 같은 자원을 탐색하십시오.

그러나 끈적 끈적한 요소 내에서 동적 크기의 컨텐츠를 다룰 때 문제가 발생합니다. 이로 인해 컨텐츠가 뷰포트 아래에 숨겨 질 수 있으며, 사이드 바의 높이가 사용 가능한 화면 공간을 초과 할 때 일반적인 문제입니다.

최근 에이 문제가 발생하면서 기본 콘텐츠 영역이있는 데스크탑 레이아웃과 액션 항목 및 필터가 포함 된 사이드 바를 설계했습니다. 사이드 바는 스크롤하는 동안 뷰포트에 고정되어 있어야했습니다. 초기 스타일링은 간단했지만 사이드 바 콘텐츠의 가변 높이는 도전을 제시했습니다. max-height 와 overflow-y: auto 더 큰 화면에서 잘 작동했지만 작은 뷰포트로 인해 사이드 바가 오버플로 발생했습니다.

동적 높이 문제 해결

초기 접근 방식은 미디어 쿼리를 사용하여 작은 화면에서 끈적 끈적한 위치를 제거하여 컨테이너에 비해 사이드 바를 만듭니다. 그러나 사이드 바의 동적 높이로 미디어 쿼리에 적합한 중단 점을 찾을 수 없었습니다. 뷰포트 크기에 따라 높이를 동적으로 조정하기위한 JavaScript 솔루션은 지나치게 복잡해 보였고 창 크기 조정과 관련된 문제가 발생하기 쉽습니다.

보다 우아한 CSS 기반 솔루션이 효과적이었습니다.

솔루션 구현

주요 요소는 레이아웃에 Flexbox를 사용하여 데스크탑 너비를 위해 고정 flex-basis 사이드 바에 할당하고 기사 요소가 나머지 공간을 채울 수 있도록합니다. Flexbox Holy Albatross Technique는 미디어 쿼리없이 작은 뷰포트에 적절한 쌓기를 보장했습니다. align-self: start 주요 기사로 높이가 늘어나지 못하게됩니다.

끈적 끈적한 사이드 바의 주요 CSS :

 .sidebar {
  -오프 세트 : var (-공간);
  / * ... */
  위치 : 스티커;
  상단 : var (-오프셋);
}

이것은 CSS 사용자 정의 속성 ( --offset )에 의해 제어되는 상단 오프셋으로 끈적 끈적한 동작을 설정합니다. 이 변수는 일관된 간격을 위해 재사용됩니다.

사이드 바 구성 요소의 구조 :

 .요소 {
  디스플레이 : 그리드;
  그리드-템플릿 열 : 자동 1fr ​​오토;
}

.component .Content {
  최대 높이 : 500px;
  오버플로 -Y : 자동;
}

유연한 레이아웃을 위해 CSS 그리드를 사용합니다. 컨텐츠 섹션의 max-height 과도한 성장을 방지하고 overflow-y: auto 필요할 때 스크롤을 가능하게합니다. 결정적으로, 사이드 바 컨텍스트 내에서 :

 .sidebar .component {
  Max-Height : calc (100vh- var (-오프셋) * 2);
}

이는 뷰포트 높이와 오프셋을 기반으로 max-height 동적으로 계산하여 오버플로를 방지합니다.

이 접근법은 다른 뷰포트 크기에 적응하는 반응 형 스티커 사이드 바를 만듭니다. 데스크탑에 적합하지만 "점프로 이동하는"버튼 또는 사이드 바를 숨기거나 표시하는 토글과 같은 작은 장치에는 추가 향상이 필요할 수 있습니다. 사용자 테스트는 추가 반복을 안내합니다.

위 내용은 HTML 및 CSS가있는 동적 크기의 끈적 끈적한 사이드 바의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!