CSS에서 height: 100% 가 동작 하도록 설정하기

<div> 태그의 높이를 100%로 줘서 차지할 수 있는 전체 높이를 가지도록 하려고 합니다. 아래와 같이 스타일에 hieght: 100% 를 지정했지만 동작하지 않습니다.

.panel-container {
    height: 100%;
    display: flex;
    flex-direction: row;
    border: 1px solid silver;
    overflow: hidden;
}

너비나, 높이를 비율(%)로 주게 되면 그 엘리먼트를 포함하고 있는 부모 엘리먼트에 대해 상대적으로 길이가 정해 집니다.

부모 태그가 body 인데, body 는 기본적으로 높이값이 나오지 않습니다. 그러므로 해결 방법은 부모 태그에 높이를 주면 됩니다.

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

원하는대로 높이가 브라우저 전체 높이로 주어졌습니다.

※ 참고

<span> 태그와 같은 display 속성이 기본적으로 inline인 엘리먼트는 너비와 높이를 지정하더라도 무시되어 버립니다. 이때 inline 속성의 특징을 가지면서도 너비와 높이를 지정할수 있도록 하려면 display 속성을 inline-block으로 지정하면 됩니다.