가장자리로부터의 거리로 정의 된 영역을 iframe에 채우는 방법은 무엇입니까?

Question

아래쪽, 오른쪽, 왼쪽 및 위쪽 CSS 스타일로 지정된 페이지의 모든 영역을 채울 iframe이 있습니다. 나는이 방법을 수행 할 때 그러나, 나는이 일을 기대, 그렇지 않습니다 :

HTML :

<iframe id="example_frame" src="http://example.com"></iframe> CSS :

이 웹 페이지에 대한 100 × 100로 작은 상자에 결과

#example_frame { 
    position: absolute; 
    top: 1em; 
    left: 1em; 
    right: 1em; 
    bottom: 1em; 
} 

픽셀

Answer 1

내가 생각을 top, right, bottom 및 left의 조합을 설정할 수 없습니다. 당신은 할 수 있어야합니까? 전혀. 그러나 당신은 할 수 없습니다. 대신 하나의 세로 속성 (top 또는 bottom)과 하나의 가로 속성 (left 또는 right)을 설정 한 다음 height 및 width을 100%으로 설정할 수 있습니다.

iframe 주위에 1em 개의 공백이있는 효과를 얻으려면 iframe을 div과 같이 대체되지 않은 다른 요소로 감싸 주면됩니다.

<div class="abs-frame-container"> 
    <iframe id="example_frame" src="http://example.com"></iframe> 
</div> 

당신이 가고있는 효과를 생산하는 CSS는 다음과 같습니다

.abs-frame-container { 
    position: absolute; 
    top: 1em; 
    left: 1em; 
    right: 1em; 
    bottom: 1em; 
} 

.abs-frame-container iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    border: 0; 
    height: 100%; 
    width: 100%; 
} 

는 또한 모든 브라우저에서 작동하지 않습니다 CSS에 border: 0를 설정하는 문제를 밖을 봐.

Answer 2

잘 모르겠지만 iframe을 position: absolute to be able to set a size in terms of the browser window;으로 정의하지 않아도됩니까? 나는 그것이 기본적으로 display:block이라고 생각하니?

---

OP의 의견에 따라 편집되었습니다.

어떤 doctype을 사용하고 있습니까? 문제는 테스트 할 수있는 모든 브라우저/플랫폼에서 발생합니까? 스타일 시트를 성공적으로 호출하고 있습니까? 인라인 스타일, 머리 스타일 또는 외장 시트를 사용하고 있습니까?

인라인 스타일을 사용하지 않는 경우 인라인 스타일을 사용 중인지 아닌지 확인하려면 인라인 스타일을 사용하십시오.

Answer 3

절대 위치 지정은 한 번에 하나의 x 좌표와 하나의 y 좌표로 작동합니다. 브라우저가 좌표를 무시하고있는 것 같습니다. 또한

, 당신은 a로 지정하지 않은 또는 iframe 대응의 높이, 그것은 같은 시도 100 × 100

을 디폴트되어 있기 때문에 : iframes이 replaced elements이기 때문에

#example_frame { 
    position: absolute; 
    top: 5%; 
    left: 5%; 
    width: 90%; 
    height: 90%; 
}