[Next]UI Layout 설계 (height:100%가 화면 높이를 모두 차지하지 않던Issue)

소개

 프로젝트를 시작할 때, 나는 Header, Nav, Section, 그리고 Footer로 기본 레이아웃을 구성했다. Nav는 항상 화면의 왼쪽 중앙에 고정되어야 했기 때문에, 화면을 Header, Section, 그리고 Footer로 나누어 설계했다. Header와 Footer의 높이는 고정되어 있었지만, Section은 나머지 영역의 100%를 차지해야 했다.

문제 

 레이아웃을 설정하고 Section의 높이를 100%로 지정했지만, 화면 높이를 꽉 채우지 못하는 문제가 발생했다. 이후 문제 해결을 위해 높이 값을 부모 요소인 html 및 body에 의존해야 한다는 점을 깨달았다.

원인 

 하지만 문제는 계속해서 발생했고, 개발자 도구를 사용하여 Elements 탭을 검사한 결과, html 및 body 요소의 높이는 모두 100%로 설정되어 있었지만, __next라는 id를 가진 div가 부모 요소인 html 및 body의 높이를 상속받지 않고 있었다(원인에는 다양한 이유가 있다고 한다).

해결 과정 

 따라서 __next 요소의 높이를 100%로 설정하기 위해 전역 스타일 파일에서 시도했지만, 여전히 화면을 꽉 채우지 못했다. 그래서 다음과 같은 CSS 스타일을 사용하여 __next 요소를 최상위 부모 요소로 지정하여 화면을 꽉 채우도록 설정했다:

 #__next{
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }

그 다음에는 레이아웃에서 display: flex; flex-direction: column;을 설정하고, Section 요소의 flex를 1로 또는 justify-content: space-between;를 설정한 후, Section의 하위 요소의 높이를 100%로 설정하여 문제를 해결하고 레이아웃을 고정했다.

결론 

 이 경험을 통해 높이를 100%로 설정할 때 부모 요소가 html 및 body인 경우에도 고려해야 함을 깨달았다. 

또한 이러한 방식을 사용하면 화면의 높이를 가득 채우고 여백을 없앨 수 있지만, 페이지 레이아웃 및 다른 스타일 요구 사항에 따라 z-index를 조정할 필요가 있을 수 있다고 생각했다.