문제
CSS로 레이아웃을 잡을 때 main에 해당하는 부분을 height:100%로 설정해도 화면에 나타나지 않는다.
예시:
See the Pen Untitled by Jason Park_朴城范_박성범 (@wannabecm) on CodePen.
이는 부모테그에 높이가 지정되어 있지 않기 때문이다.
부모의 높이가 0이기 때문에 자식요소의 높이를 100%로 설정을 해줘도 여전히 0*100% = 0 인것이다.
해결방법
따라서 이런 경우에는 부모테그에 해당하는 블록의 높이를 100%로 지정해준다.
이때 바로 한 단계 상위 부모테그 뿐만 아니라, 상위에 있는 모든 부모 테그의 높이를 지정해주어야 한다.
즉, 여기에서는 한 단계 상위 부모테그인 body 뿐만 아니라 그보다 더 상위 부모 테그인 html의 높이도 지정해주어야 한다.
See the Pen Untitled by Jason Park_朴城范_박성범 (@wannabecm) on CodePen.
이렇게 html,body의 높이도 100%로 지정을 해주니 편안해졌다.
만약 react를 사용할 경우 root테그의 높이도 100% 지정해주어야 한다.