본문 바로가기
프로그래밍/HTML, CSS

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

by pentode 2018. 9. 27.

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


.panel-container {

    height: 100%;

    display: flex;

    flex-direction: row;

    border: 1px solid silver;

    overflow: hidden;

}


div 높이 100%가 동작하지 않는다.



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


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


html, body {

    margin: 0;

    height: 100%;

    overflow: hidden;

}


height 100% 동작하도록 지정 결과



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


※ 참고

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

반응형