웹 프로그래밍/CSS

iframe height:100% 오류

웹 개발자의 비상 2010. 4. 2. 18:15

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
아래와 같이 태그를 선언하고 iframe 에 height 를 100% 로 주면 200px 정도의 크기로 고정되는 현상

원인:parent.element 의 height의 영향을 받기 때문
해결책은....  html/body/iframe 모두 height를 100%로 선언해야한단다...
위와 같이 선언을 해두면 div element의 100% height 속성이 제대로 표현된다.

<style type="text/css">
html, body {
  height: 100%;
}

</style>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<style type="text/css">
html, body {
    height: 100%; overflow:hidden;
}
</style>

<html>
<body>
<iframe style="height: 100%;" src="test.html"></iframe>
</body>
</html>

728x90