몰

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

· 2020-12-08 (화) 16:34:52 · 6239 · 2

[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개

댓글을 작성하시려면 로그인이 필요합니다.
+
제목 글쓴이 날짜 조회
20-12-11 조회 8,779
20-12-10 조회 8,450
20-12-10 조회 7,825
20-12-08 조회 6,240
20-12-08 조회 8,944
20-12-05 조회 8,373
20-12-03 조회 7,531
20-12-03 조회 5,847
20-11-24 조회 6,691
20-11-24 조회 8,047
20-11-23 조회 6,398
20-11-22 조회 7,627
20-11-20 조회 5,879
20-11-19 조회 6,862
20-11-19 조회 5,778
20-11-19 조회 5,939
20-11-19 조회 6,309
20-11-14 조회 7,921
20-11-11 조회 7,786
20-11-09 조회 6,868
20-11-06 조회 8,301
20-11-05 조회 7,429
20-11-01 조회 7,352
20-10-30 조회 1.2만
20-10-28 조회 6,756
20-10-28 조회 7,433
20-10-27 조회 1.5만
20-10-27 조회 6,073
20-10-21 조회 6,308
20-10-20 조회 6,644