[TIL] React.js에서 div height를 100%가 적용이 되지 않을 때

React.js에 div 태그를 넣고 height(높이)를 100%해도 적용이 되지 않았다.

 

구글링을 한 결과 html 태그와 body 태그에 height 100%를 적용하면 해결된다고 하였다.

 

html, body {
  height: 100%;
}

코드 블럭에 위의 코드를 추가해 주었는데 div 태그는 여전히 변함이 없었다.

 

그래서 다른 것을 찾아보았는데 div의 height의 단위로 '%'가 아닌 'vh'를 사용하라고 했다.

 

vh는 viewport height의 줄임말로 웹 페이지에서 사용자에게 보여지는 영역이다.

 

vh의 단위는 100분의 1이다.

 

즉, 100px 일때 1vh는 1px이 되는 것이다.

 

hight의 단위를 %에서 vh로 변경을 하였더니 div가 내가 원하는데로 높이가 변경이 되었다.