HTML은 iframe이 쿼리

나는 다음과 같은 시나리오있다 : -HTML은 iframe이 쿼리

HTML 페이지에

가 다른 HTML 페이지 다음에 상단 표시 줄을 표시는 내가 Iframe을 사용했습니다있는 페이지의 하단 (에에 동적으로 포함). 따라서 창에 대한 스크롤 막대가 나타나서는 안됩니다. 대신, 포함 된 페이지에 대한 스크롤 막대가 나타나야합니다. 페이지 본문의 overflow: hidden 속성을 사용하여이 작업을 수행 할 수 있습니다.

그러나 이것을 달성하기 위해 iframe의 높이를 100 %로 설정해야 페이지가 매끄럽게 보입니다. 이 문제는 iframe을 conatins하는 하위 div가 부모의 <body>에서 흘러 나와서 몸에 overflow:hidden을 부여했기 때문에 모든 포함 된 페이지의 마지막 비트가 잘리지 않는다는 것입니다. 어떻게 이것을 극복 할 수 있습니까?

코드 : -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <title>Show Asset</title> 
    <style> 
    html, body, iframe 
    { 
     height: 100%; 
    } 
    body 
    { 
     overflow: hidden; 
     margin: 0px; 
     } 
    iframe 
    { 
     width: 100%; 
     margin: 0px; 
     border: 0px; 
     padding: 0px; 
     } 
    .optionsBar 
    { 
     background-color: Lime; 
    } 
    .iframeHolder 
    { 
     /* height: 100%;*/ 
    } 
    </style> 
</head> 
<body> 
<div class="optionsBar">Test</div> 
<div class="iframeHolder"> 
    <iframe frameborder="0" scrolling="auto" src="http://en.wikipedia.org/wiki/Main_Page"></iframe> 
</div> 
</body> 
</html>

출처

2010-02-16 Ajay

내가 올바르게 그러나 나는 내가 확실하지 않다, 문제를 해결할 수있는 문제를 이해하고있어합니다.

iframe { 
border:0 none; 
margin:0; 
overflow:visible; 
padding:0; 
width:100%; 
}

출처

2010-02-16 11:41:37 gingerbreadboy

아니요, 여기서 문제는 Iframe이 몸 밖으로 넘치고 있다는 것입니다. – Ajay

box-sizing으로 할 수 있습니다. 예를 들어 this question을 참조하십시오.

불행히도 IE6-7은이 속성을 지원하지 않으므로 해당 브라우저에서 JavaScript onresize 처리기를 추가하여 창 높이를 알아 듣고 (document.documentElement.clientHeight 표준 모드라고 가정) iframe 높이를 바의 크기를 뺀 것입니다.

출처

2010-02-16 12:04:04 bobince

내가 필요로하는 기능은 Google 이미지 결과 페이지 (이미지 결과를 클릭하면 얻을 수있는 페이지)에 표시된 기능과 동일합니다. 이 페이지는 크기를 재조정하는 자바 스크립트가없는 것 같습니다. 그것 없이는 어떻게 가능합니까? 또한 해당 페이지는 Quirks 모드로 렌더링됩니다. 어떻게 (그리고 그렇게) 변화를 가져올 것입니까? – Ajay

아, 예, 현재 테이블 레이아웃을 사용하고 있고 Quirks 모드를 사용하여 두 번째 행의 셀이 행의 전체 높이 (상단 막대가 제거 된 후 100 % 페이지 높이의 나머지 부분)임을 확인합니다. Firefox와 WebKit에서는 ''높이를'100 %'로 설정할 수 있고 행의 높이를 집어 넣을 수 있지만 Internet Explorer와 Opera에서는 전체 테이블 높이를 사용합니다 그래서 당신은 오버플로를 얻습니다. – bobince

HTML은 iframe이 쿼리

답변

관련 문제