퍼블리싱으로 많은 웹사이트를 만들어오면서 어려웠던 부분이 있었는데 바로 height: 100% 속성과 값이 잘 안되는 부분이었다...
오늘은 간헐적으로 되다 안되다 하던 이 골치아픈 문제를 모두 모아서 한방에 해결하기 위한 height: 100% 적용할 수 있는 내용들의 총 정리이다.


# height 100% 적용할 수 있는 방법
우선 왜 height 100%가 적용되지 않는지 알아야한다... 그 이유중 하나가 바로 기준값의 부재이다.

1. 부모 요소의 설정값을 확인할 것!
; height를 100%로 설정하는 것은 값을 상대값으로 지정하는 것이기 때문에 부모요소에 대한 명확한 height 값이 정의되있어야만 가능합니다. 그래서 만약 부모가 가진 height 값이 설정되어 있지 않는 경우 아래와 같이 부모의 height 높이값을 설정하는 것이 필수적입니다.


2. min-height, height 여부를 확인할 것!!
!! 만약 height, min-height를 동시에 쓴다면?
; 이때는 height값과 min-height값중 최소 height 값을 기준으로 height: 100%가 적용된다. 예를 들어...

height: 300px; min-height: 600px;

위와 같은 경우 설정되는 height 값은 600이다.


3. 트릭을 사용할 것!!!
; 아래의 코드는 이를 해결하기 위한 트릭 중 하나로 알려져있다. 아래 코드를 적용해보자.

<style>
  position: absolute;
  top: 0;
  bottom: 0;
</style>