100dvh를 사용한 페이지를 작성중인데 상단에 여백이 남는 이유를 알고 싶습니다.

Question

100dvh를 사용하여 한 페이지씩 넘어가도록 코드를 작성했는데첫번째 페이지를 제외한 나머지 페이지들은 상단에 미세한여백이 남고 마지막 페이지에서는 그 여백만큼 추가적으로스크롤이 더 필요한 상황이 생기는데 이유를 모르겠습니다.이유를 알 수 있을까요? 아래 사진의 빨간색으로 표시된부분이 해당 여백입니다. 포트폴리오

1

2

3

4

@charset "utf-8"; body::-webkit-scrollbar { display: none; } body{ width: 100%; height: 100dvh; } #wrap{ width: 100%; height: 100dvh; } header{ width: 100%; height: 60px; position: fixed; top: 0; left: 0; } nav{ width: 100%; min-width: 1024px; max-width: 1200px; height: 60px; line-height: 60px; background-color: yellow; margin: 0 auto; position: relative; } .logo{ position: absolute; top: 0; left: 0; font-size: 28px; } .menu_list{ position: absolute; right: 0; top: 0; display: flex; justify-content: space-between; } main{ width: 100%; height: 100dvh; } .content{ width: 100%; height: 100vh; } .content:nth-of-type(2n){ background-color: #333; color: red; } .content:nth-of-type(2n-1){ background-color: #ededed; color: blue; }$(document).ready(function () { var html = $("html"); var page = 1; var lastPage = $(".content").length; // 기본적으로 페이지 맨 위로 초기화 html.animate({ scrollTop: 0 }, 50); // 휠 이벤트 처리 $(window).on("wheel", function(e) { // 애니메이션 중이면 이벤트 처리 안함 if (html.is(":animated")) return; // 마우스 휠을 아래로 스크롤 if (e.originalEvent.deltaY > 0) { if (page == lastPage) return; page++; } // 마우스 휠을 위로 스크롤 else if (e.originalEvent.deltaY < 0) { if (page == 1) return; page--; } // 스크롤 위치 계산 후 애니메이션 적용 var posTop = (page - 1) * $(window).height(); html.animate({ scrollTop: posTop }, 500); // 애니메이션 효과를 500ms로 설정 }); });

dmm11 · Answer

브라우저에서 자동으로 적용되는 스타일이 있을 것 같아요body에 margin을 0으로 설정해보시겠어요?

캐티 · Answer

위에 line-height를 사용하였쩌. 행간을 건드리면 위치가 틀어질 잠재적인 위험이 있스빈다. jsfiddle 같은데서 재현이 안되나요.

스프라이트마시쪙 · Answer

box-sizing: border-box 한번 해보시겠어요

kimhwanhoon · Answer

두 번째 보는것 같은데 그냥 깃허브 소스를 공개해주시면 가서 보고 커밋해드릴게요

100dvh를 사용한 페이지를 작성중인데 상단에 여백이 남는 이유를 알고 싶습니다.

4개의 답변

#css 목록