height 100퍼센트 최대길이 적용 안되는 이슈

특정 요소의 높이가 페이지 전체 높이와 같게 맞춰야 하는 경우가 있을 수 있습니다. 반응형으로 브라우저가 늘어나면 자동으로 해당 영역의 끝이 맞도록 말이죠 ~ 간단하게 예를 들어 아래의 이미지를 보시면 더 쉽게 이해가 가실겁니다. 아래 이미지를 봐주세요!


좌우 두개의 컬럼 중 왼쪽은 흰부분 없이 height 100% 필요 

위 이미지는 두개의 컬럼이 좌우 대칭되는데 좌측 컬럼은 항상 최대값을 적용하길 원합니다. 즉 height: 100%; 가 적용되었으면 좋겠습니다. 하지만 그렇게 만들기 위해서는 계속해서 height값을 브라우저 크기와 동일하게 만드는 스크립트를 사용해야 하는데 이는 코드가 무거워 질수도 있고 생각치 못한 오류도 발생할 수 있기 때문에 가급적 스크립트가 아닌 CSS를 사용하는 것이 편리하겠죠. 이런 경우 어떻게 하면 우리가 원하는 아래 이미지처럼 만들 수 있을까요?


이처럼 좌측 컬럼이 아래까지 길어지길 원하는 이슈사항
먼저 해당 컬럼이 height: 100%를 가지려면 position 속성값을 확인해야합니다. 다른 요소에 영향을 받아 height 값이 정해지는 경우가 아니기 때문에 position은 아래와 같이 설정합니다.




그래도 적용이 안되신다구요? height: 100% 속성값은 부모 요소의 속성값에 영향 받기 때문입니다. 이를 해결하기 위해 아래의 코드를 적용하도록 합니다.


위의 코드를 적용하면 이상없이 원하는 것처럼 height: 100% 설정이 가능합니다.