fixed header 가 있을때 내부링크 (inside link) 문제 해결 > IT 기술백서

IT 기술백서

직접 알아내거나 검색하기 귀찮아서 모아 둔 것

css | fixed header 가 있을때 내부링크 (inside link) 문제 해결

본문

[code]

<header>

  상단 고정 헤더

  <a href="#sec">본문으로 이동</a>

</header>

...

...

...

<div class="sec" id="sec">

본문

</div>

[/code]

 

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

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

 

[code]

#sec {

    &::before {

        content: '\00a0';

        display: block;

        margin: -100px 0 0;

        height: 100px;

    }

}

[/code]

댓글 0개

등록된 댓글이 없습니다.

Menu