css 작업을 하다보면 height: 100% 을 적용 해야하는 경우가 생긴다. 하지만, 막상 사용하다보면 그렇게 쉽게 작용이 되지 않는다. 그래서 결국 vh, px, javascript 등의 방법으로 height: 100% 의 효과를 내는 경우가 생긴다.
사실 height: 100% 가 되지 않는 이유는 매우 간단하다. css의 % 단위는 부모의 크기에서 계산을 하는데 부모의 크기가 정해지지 않았기 때문이다.
그럼 width 의 경우 직접 지정한 크기가 없는데 왜 width: 100% 는 잘 먹는지에 대한 답은 간단하다. 대부분 부모 엘리먼트는 display 속성이 block 이기 때문이다. block 속성의 경우 width: 100% 의 효과를 가지고 있다. 또한, 흔하게 볼 수 있는 HTML 마크업 구조를 보자면 html > body > header + main + footer의 경우가 많을텐데 여기서 최상위 부모 엘리먼트인 html 과 body 엘리먼트는 기본 속성이 display: block 이다. 그렇기 때문에 우리가 많이 사용하는 width: 100%는 대부분의 경우 잘 작동한다.
하지만, display: block 의 경우 width: 100%가 적용이 되지만, height의 경우 auto 속성을 가지고 있다. width와 height의 경우 auto 속성을 가지고 있을 때는 자식의 크기로부터 자신의 크기를 계산하기 때문에 우리가 사용하는 height: 100%의 경우 작동이 안 되는 경우가 많다.
한 줄 정리
height: 100% 가 작동이 안 될 경우 부모의 height 크기가 정해져 있는지 확인을 해보자.
👍👍👍👍👍