[CSS] 높이 100% 하는 방법

📱테스트 환경

"react": "18.2.0"
"react-dom": "18.2.0"
"typescript": "^5.1.6"

---

😢 내가 겪은 문제

나는 이 문제가 제일 짜증난다. 내가 하는 방법이 맞는지도 모른다. 되니까 쓰고는 있는데 ...

height: 100%

해도 높이가 100% 가 안된다. 진짜 너무 답답하고 화가나는데 .. 일단 되긴 하니 방법을 공유하려고 한다.

나같은 문제를 겪는 사람이 많은 것같다. 검색해보면 참 많은 정보가 나온다.

globals.css

html,
body,
body > div:first-child,
div#__next,
div#__next > div {
  height: 100%;
}

div#__next > div {
  height: calc(100% - 61px);
}

여기서 주의해야하는건 #__next > div 높이를 61px 빼준 걸 확인할 수 있다.

div#__next > div {
  height: calc(100% - 61px);
}

나는 Header 를 추가해서 작업해 넣었는데, 헤더의 높이가 61px 이다. 이만큼 빼주지 않으면 계속 스크롤이 생겼다.

나처럼 Header 가 있는 경우에는 해당 코드를 삽입해서 해당 높이만큼 빼주면 스크롤이 발생하지 않고 한 화면 안에 다 담을 수 있다.

다시 한 번 말하지만 내가 사용하는 방법이 정답인지는 나도 모른다. 정말 되니까 사용하는 방법이다.

내가 사용하는 방법보다 더 좋은 방법을 생각해냈거나, 찾았다면 그 방법을 사용하는 것을 추천한다.