SIR

1원팁) 헤더가 fixed 일때 내부링크시 상단 가려지는 문제 해결법 > 그누보드5 팁자료실

그누보드5 팁자료실

1원팁) 헤더가 fixed 일때 내부링크시 상단 가려지는 문제 해결법 정보

1원팁) 헤더가 fixed 일때 내부링크시 상단 가려지는 문제 해결법

본문


<header>
  상단 고정 헤더
  <a href="#sec">본문으로 이동</a>
</header>
...
...
...
<div class="sec" id="sec">
본문
</div>

 

위와 같은 코드가 있고 <header>가 fixed 일때 내부링크 #sec 를 클릭하면 상단 고정된 헤더에 시작 부분이 가려잡니다.

이때는 아래와 같이 하면 헤더의 높이만큼 여백을 포함하기 때문에 정확히 출력됩니다.

 


.sec::before {
    content: '\00a0'; // 그냥 공백으로 하면 안나올 수 있다.
    display: block;
    margin: -100px 0 0;  // 100px 는 헤더 height
    height: 100px; // 100px 는 헤더 height
}
추천1

댓글 1개

전체 1,784 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT