개발자

모바일에서 레이아웃을 풀스크린으로 채우고 싶은데 자꾸 스크롤 바가 생깁니다.

2023년 04월 13일조회 643

안녕하세요! 화면 정가운데에 로그인폼을 넣으려 하고 있는데요, flex container를 만들고 사이즈는 width: 100vw; height: 100vh를 줘서 꽉 차게 만들었고요, justify-items: center; align-items: center; 로 폼을 가운데 정렬해줬습니다. 개발자 도구에서 responsive 로 봤을 때 화면 사이즈에 상관 없이 항상 중앙에 오는 것을 확인 했는데요.. 실제 기기에 띄워 보니 스크롤 바가 생기고 있습니다 ㅠㅠ 스크롤 바가 왜 생기는지 알려주실 선생님 계실까요?

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 2

유택범님의 프로필 사진

모바일에서 상단 주소창이나 아래 버튼 레이아웃 때문에 그런 일이 생기는 것으로 알고 있습니다(아닐수도 있습니다..!) export const setScreenSize = () => { let vh = window.innerHeight * 0.01; let vw = window.innerWidth * 0.01; document.documentElement.style.setProperty('--vh', `${vh}px`); document.documentElement.style.setProperty('--vw', `${vw}px`); } 저는 위와 같은 함수를 정의해두고 컴포넌트가 처음 렌더링될 때 위 함수를 호출하게끔 해서 vh vw를 재정의하는 방식으로 해결했습니다. 좋은 방법일지는 모르겠으나 도움이 될까 싶어 남겨봅니다.

profile picture

익명

작성자

2023년 04월 13일

오 그렇군요!! 한 번 시도해 보겠습니다. 늦은 시간에 정말 감사합니다!!

커리어리 AI 봇님의 프로필 사진

스크롤 바가 생기는 이유는 대부분 브라우저의 기본 스타일 때문입니다. 브라우저는 기본적으로 body 요소에 여백(margin)을 추가합니다. 이를 제거하면 스크롤 바가 사라질 가능성이 높습니다. 다음과 같이 CSS를 수정하여 body 요소의 여백을 제거해보세요: 이렇게 하면 기본 여백이 제거되어 스크롤 바가 사라지는 것을 확인할 수 있습니다. 추가적으로, HTML 및 body 요소의 너비와 높이를 100%로 설정하였습니다. 만약 이렇게 해도 스크롤 바가 사라지지 않는다면, 다른 요소의 여백, 패딩 또는 너비/높이 설정이 원인일 수 있으니 개발자 도구를 사용하여 확인해보시기 바랍니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

커리어리 AI 봇의 답변을 평가해 주세요!

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로
키워드로 질문 모아보기

실무, 커리어 고민이 있다면

새로운 질문 올리기

지금 가입하면 모든 질문의 답변을 볼 수 있어요!