html, body 높이값 초기화

문제

#container {
  width: 100%;
  height: 100%;
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

다음과 같이 콘텐츠에 해당하는 영역을 묶어주기  위해 id가 container인 태그를 만들어 주었다.

영역의 크기를 화면 전체에서 header와 footer 영역을 제외 한 나머지로 잡기 위해 width와 height를 100%로 설정해 주었다.

 

 

 하지만 브라우저 상에선 아무런 변화도 없는 문제가 생겼다.

 

문제해결

#wrap {
  width: 100%;
  height: 100%;
  padding-right: 180px;
}

현재 #container인 태그의 부모 태그는 #wrap이다.

너비나 높이를 비율(%단위)로 주게 될 경우 해당 엘리먼트를 포함하고 있는 부모 엘리먼트에 대해 상대적으로 길이가 결정된다.

#container는 부모인 #wrap의 너비와 높이에 대해 상대적으로 크기가 결정되는데, #wrap 또한 너비와 높이가 부모의 너비와 높이로 인해 상대적으로 결정된다.

 

#wrap의 부모 요소는 body태그이다.

하지만 body는 기본적으로 높이값을 가지고 있지 않다.

그렇기 때문에 #container > #wrap > #body로 이어져 높이값이 0으로 랜더링되어 화면 상에서 어떠한 변화도 보이지 않게 된 것이다.

(너비와 같은 경우는 비율로 설정할 시, 브라우저의 innerWidth만큼의 너비를 지니게 된다)

 

html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100%;
}

 

다음과 같이 상위 요소인 html과 body에 height값을 추가해 줌으로써 문제를 해결하였다.