100vh했을 때 스크롤 생기는 거 방지하기

스크롤이 생기는 이유들!!

1. 브라우저의 주소 표시줄 높이: 특히 모바일 브라우저에서 100vh는 종종 주소 표시줄을 포함한 전체 높이를 의미합니다. 그래서 실제로는 화면보다 조금 더 길게 나타나게 됩니다.

 

2. Box Model: 기본적으로 width와 height는 컨텐츠의 크기만을 포함하기 때문에, padding, border, margin 등이 추가되면 요소의 전체 크기가 100vh보다 커질 수 있습니다.

 

3. 다른 요소들: 해당 요소 외에도 페이지에 다른 요소들이 존재할 경우 그 요소들의 높이 때문에 스크롤이 발생할 수 있습니다.

 

 

해결 방법들

1. 모바일 브라우저의 주소 표시줄 때문에 문제가 발생한다면, window.innerHeight를 사용하여 실제 높이를 얻고 이를 요소에 적용할 수 있습니다.

// App.js 

let vh = window.innerHeight * 0.01

  document.documentElement.style.setProperty('--vh', `${vh}px`)

  window.addEventListener('resize', () => {
    let vh = window.innerHeight * 0.01
    document.documentElement.style.setProperty('--vh', `${vh}px`)
  })

 

.높이를주려는요소 {
    height: calc(100 * var(--vh));
}

 

2. 페이지에 margin이나 padding이 추가되지 않도록 합니다. 사용하고 있는 요소의 기본 적은 margin이나 padding을 제거해줍니다. 100vh 말고 다른 방법을 사용해 전체 높이를 설정할 수 있습니다. ex) flexbox, grid 등

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.yourElement {
    flex: 1;
}