CSS3 : 내용에 맞게 iframe의 높이를 조정하십시오.

저는 CSS가 처음이므로이 질문에 대한 해결책은 간단 할 수 있습니다. 나는 웹을 수색했으나 아무 해결책도 찾지 못했다. 사실이 문제는 상당히 흔한 일입니다.CSS3 : 내용에 맞게 iframe의 높이를 조정하십시오.

나는 다음과 같이 HTML 문서에 iframe이를 내장하고있다 :

<!DOCTYPE html> 
<html> 
    <head> 
    <link rel="stylesheet" type="text/css" href="main.css" /> 
    </head> 
    <body> 
    <p>Test</p> 
    <iframe class=result-frame src="/media/converted/1409487227933_testpage.html></iframe> 
    </body> 
</html>

가 지금은 모든 내용을 둘러싸 필요로 iframe이이 같은 큰 만들고 싶어. 이를 위해 나는 100 %로 폭을 설정

.result-frame { 
    width: 100%; 
}

하지만 내가 iframe이의 높이를 더 스크롤 막대가 표시되지 않도록 그 내용을 충분히 들어갈 수 조절할 수 있습니다 방법을 모르겠어요.

자바 스크립트를 사용하는 몇 가지 솔루션을 보았지만 CSS/HTML 만 사용하고 싶습니다. 이것은 가능한가?

토비아스

출처

2014-08-31 Tobias

가 아니, 그건 단지 HTML과 CSS 불가능 :

또한 html 태그를 사용할 수 있습니다. – CBroe

CSS에서는 불가능합니다. 그리고 iframe은 여러 브라우저에서 서로 다른 방식으로 작동합니다. Al iPad에서 Safari로 보시면 iframe이 100 % 높이로 표시됩니다. 사람들이 컨테이너에 넣고 다른 브라우저에서는 설정하지 않고 overflow-y: scroll;으로 설정하여 해결하는 버그가 바로 있습니다.

당신이 할 수있는 것은 자바 스크립트로 몸체의 높이를 얻고 iframe에 동일한 높이를 설정하는 것입니다. 여기, 여기 jQuery를 사용하고 작동 코드 조각은 그러나 당신이 jQuery를하지 않고 작업을 수행 할 수 있습니다

$('#iframe-id').height($('#iframe-id').contents().find('body').height());

을 신체의 높이가 당신의 iframe의 전체 높이라고 가정, 부동 요소를 사용하는 경우 iframe을 지우지 않으면 문제가 발생합니다.

$('#iframe-id').height($('#iframe-id').contents().find('html').height());

출처

2014-08-31 17:02:53

CSS3 : 내용에 맞게 iframe의 높이를 조정하십시오.

답변

관련 문제