고정 헤더에 CSS 그리드를 사용하는 방법
display: grid를 사용하여 고정 헤더를 만드는 것이 가능하다는 것을 깨달았습니다. 기여가 저에게 영감을 주는 만큼 저를 혼란스럽게 했습니다(코드 예제에서 이 모든 복잡성이 왜??). 다음은 내가 가져온 것입니다.display: absolute; 또는 display: fixed; 로 배치됩니다. display: grid 에는 훨씬 더 우아한 구문이 있습니다. 데모:
암호
HTML
<!DOCTYPE html>
<html>
<head>
<title>Sticky Header</title>
<meta charset="UTF-8" />
</head>
<body id="wrapper">
<h1 id="sticky">A Panda Bear</h1>
<main id="scroll-element">
<img alt="A panda bear" height="500px" src="https://images.unsplash.com/photo-1526716121440-dc3b4f254a0a"/>
</main>
</body>
</html>
CSS
#wrapper { height: 500px; display: grid; }
#scroll-element { overflow: auto; }
마법은 무엇입니까?
tbh, (당신이 이해하는 모든 것과 마찬가지로) 아무것도 없습니다.
무슨 일이야?
제목과 내용을 합하면 한 번에 표시할 수 있는 것보다 큽니다. 이미지는 많은 콘텐츠를 나타냅니다. 고정된(큰) 높이가 있습니다.
CSS 규칙
overflow: auto;은 브라우저가 id="scroll-element" .id="sticky"가 있는 헤더는 id="scroll-element"가 축소되고 오버플로될 수 있으므로 항상 완전히 표시됩니다.그게 다야
Reference
이 문제에 관하여(고정 헤더에 CSS 그리드를 사용하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/xaverfleer/how-i-use-css-grid-for-sticky-headers-2ong텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
