왜 height: 100%는 잘 작동하지 않을까?

sjowow·2020년 5월 7일
1

이모저모

목록 보기
1/2
post-thumbnail

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의 경우가 많을텐데 여기서 최상위 부모 엘리먼트인 htmlbody 엘리먼트는 기본 속성이 display: block 이다. 그렇기 때문에 우리가 많이 사용하는 width: 100%는 대부분의 경우 잘 작동한다.

하지만, display: block 의 경우 width: 100%가 적용이 되지만, height의 경우 auto 속성을 가지고 있다. widthheight의 경우 auto 속성을 가지고 있을 때는 자식의 크기로부터 자신의 크기를 계산하기 때문에 우리가 사용하는 height: 100%의 경우 작동이 안 되는 경우가 많다.

한 줄 정리

height: 100% 가 작동이 안 될 경우 부모의 height 크기가 정해져 있는지 확인을 해보자.

profile
소-개

2개의 댓글

comment-user-thumbnail
2020년 5월 11일

👍👍👍👍👍

1개의 답글