iframe에 절대 위치 지정으로 높이·너비를 설정할 수 없는 이유와 해결 방법

iframe은 '대체 요소'이기 때문입니다

iframe은 대체 요소(replaced element)에 해당하며, 일반적인 요소와는 다른 방식으로 동작합니다. 반면 <div> 요소는 비대체 요소(non-replaced element)입니다.

대체 요소란 실제 표시되는 내용이 CSS가 아니라 외부 리소스(별도의 문서, 이미지 등)로 대체되어 렌더링되는 요소를 말합니다. iframe은 내부에 독립된 문서를 불러오기 때문에, 브라우저가 일반 요소처럼 박스 모델을 계산하지 않습니다. 그 결과 left/right 또는 top/bottom을 동시에 지정해 요소의 크기를 결정하는 방식이 iframe에서는 정상적으로 작동하지 않습니다.

해결 방법: div 래퍼(wrapper) 활용하기

동일한 결과, 즉 iframe에서 left/right 또는 top/bottom을 모두 설정하는 효과를 얻으려면 div를 래퍼(wrapper)로 사용하는 것이 가장 확실한 방법입니다. div에 절대 위치(position: absolute)와 함께 top, left, right, bottom 값을 지정하고, 그 안에 iframe을 배치하면 됩니다.

.wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

iframe 자체의 스타일 설정

그다음 iframe에는 다음과 같이 너비와 높이를 100%로 지정합니다.

width: 100%;
height: 100%;

이렇게 구성하면 div 래퍼가 부모 컨테이너의 전체 영역을 차지하고, iframe은 래퍼의 크기에 맞춰 꽉 차게 표시됩니다. 절대 위치 지정만으로는 달성할 수 없었던 유연한 크기 조절이 가능해지며, 반응형 레이아웃에서도 안정적으로 동작합니다.