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

 

Posted by izeye

댓글을 달아 주세요

  1. 엑소버드 2012.10.01 17:33  댓글주소  수정/삭제  댓글쓰기

    와우 ! 감사합니다 !!

  2. 구 루 2012.12.12 14:41 신고  댓글주소  수정/삭제  댓글쓰기

    간단하게 해결 되었네요. 감사!

  3. eizt 2013.03.27 23:24  댓글주소  수정/삭제  댓글쓰기

    감사합니다!!! 자주와서 구경할게요 ㅋㅋㅋ