[펌] HTML에서 iframe height 100%가 적용되지 않을 때

HTML 페이지에서 iframe 태그의 height 100%가 적용이 안되어 고정 픽셀로 변경한 코드를 보고 찾아본 내용입니다.

이 내용을 찾기 전에 DOCTYPE 부분을 주석처리 하니 잘 적용이 되어 그냥 넘어 갔다가 

버전 때문에 그런건가 싶어 찾아보니 아래의 내용이 보이네요.. 그래서 저도 css 추가하는 쪽으로 코드를 변경했습니다.

===========================================================================================================

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을 설정함으로써 해결할 수 있다.

 

===========================================================================================================

참고 링크