div iframe 퍼센트 높이조절 문제 해결(div, iframe height 100%)

by 조쉬 posted Mar 05, 2019
?

단축키

Prev이전 문서

Next다음 문서

ESC닫기

크게 작게 위로 아래로 댓글로 가기 인쇄

<div style="height:100%;"></div>


위의 코드처럼 div, iframe 등의 높이(height)를 100%로 적용하였는데 사이즈 조절이 퍼센트로 적용되지 않을 경우 해결방법입니다.



일단 이 문제의 원인은 parent element의 height의 영향 때문입니다.



최상단에 아래의 DOCTYPE 코드를 삽입합니다.(아래는 XHTML 1.0 DOCTYPE 코드)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

※소스 형태(HTML4, HTML5, XHTML 1.0)에 따라 DOCTYPE 코드가 달라집니다.


그래도 적용이 되지 않는다면

아래의 css 코드를 추가하면 height 값을 퍼센트로 수정할 수 있습니다.


<style>

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

</style>