1원팁) 헤더가 fixed 일때 내부링크시 상단 가려지는 문제 해결법
[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; // 100px 는 헤더 height
height: 100px; // 100px 는 헤더 height
}
[/code]
|
댓글을 작성하시려면 로그인이 필요합니다.
댓글 2개