DOCTYPE 없을 때는 iframe height 100%가 잘 적용된다.
다음은 샘플이다.
<html>
<head>
<title>iframe Test</title>
</head>
<body>
<h1>iframe Test</h1>
<iframe src="http://cushion.flxsrv.biz/" width="100%" height="100%"></iframe>
</body>
</html>
하지만 가령 HTML5 DOCTYPE을 추가한다면
iframe height 100%가 적용되지 않는다.
왜 그럴까?
웹 브라우저 (Web Browser)는 Quirks 모드 혹은 Strict 모드로 동작한다.
DOCTYPE이 없으면 Quirks 모드로 동작하고
이 경우 body를 100%로 해석한다.
하지만 HTML5처럼 Strict 모드로 동작하는 DOCTYPE를 설정했다면
body를 100%로 해석하지 않는다.
그렇기 때문에 iframe height 100%가 적용은 되지만
body가 100%가 아니기 때문에 100%가 아닌 body 안에서 iframe height 100%를 채울 뿐이다.
이것은 아마도 우리가 원하는 바가 아닐 것이다.
따라서 다음과 같이 CSS (Cascading Style Sheets)에
body의 height을 설정함으로써 해결할 수 있다.
<!DOCTYPE html>
<html>
<head>
<title>iframe Test</title>
<style type="text/css">
html,body {
height: 100%
}
</style>
</head>
<body>
<h1>iframe Test</h1>
<iframe src="http://cushion.flxsrv.biz/" width="100%" height="100%"></iframe>
</body>
</html>
iframe height 100%가 원하는대로 적용되었음을 확인할 수 있다.
Reference:
http://stackoverflow.com/questions/6708461/why-does-iframe-height-100-not-work-in-an-xhtml-page
댓글을 달아 주세요
엑소버드 2012.10.01 17:33 댓글주소 수정/삭제 댓글쓰기
와우 ! 감사합니다 !!
천만에요 ㅎㅎ
구 루 2012.12.12 14:41 신고 댓글주소 수정/삭제 댓글쓰기
간단하게 해결 되었네요. 감사!
도움이 되었다니 다행이네요. 좋은 하루되세요~
eizt 2013.03.27 23:24 댓글주소 수정/삭제 댓글쓰기
감사합니다!!! 자주와서 구경할게요 ㅋㅋㅋ
네, 별건 없지만 ^^;