div height percentage 설정

CSS

div 태그에 height를 퍼센트로 주고 싶을 때가 있다. 이때 대부분 제대로 설정이 되지 않는데 비교가 가능한 상위 태그에 height 값이 있게 만들어주면 그 아래 div 태그 또한 조정할 수 있음. 

 

그러니까... 갑자기 쌩뚱맞게. 

 

<div style="height:50%" >abcd</div>

 

이런식으로 height를 50%을 주더라도 적용되지 않는다. 대신...

 

<div style="height:500px;">
	<div style="height:50%" >abcd</div>
</div>

이런 식으로 상위에 크기가 표현된 태그가 제대로 있다면 내부에 있는 div에는 퍼센트로 적용이 가능하다. 대부분의 경우에 html, body 태그에 height를 100%를 주고 시작하면 처리가 가능해진다. style 태그 사이에 아래 내용을 추가해보자. 혹은 css 파일에 하단의 내용을 추가해보자.

html, body{ height:100%; }

 

잘 처리가 되는군...