페이지 하단에 기입 할 Iframe 가져 오기

Question

이것은 간단한 질문이어야하지만 어디서나 솔루션을 찾을 수없는 것처럼 보입니다.

웹 사이트에서 높이가 43px 인 페이지 상단에 탐색 바가 있으며 각 페이지마다 편집 할 필요가 없도록하기 위해 iframe을 넣습니다. 내 iframe의 소스를 타겟팅하는 탐색 버튼으로 100 % 너비 아래에 있습니다.

이제 문제가 생기는 이유는 iframe을 탐색 모음 아래쪽에서 페이지 맨 아래로 확장하여 iframe이 있다고 말할 수 없지만 높이를 100으로 설정하면됩니다. 그것은 전체 페이지의 높이로 설정하고 하단에 여분의 43px를 보완하기 위해 두 번째 스크롤 막대를 추가합니다, 그래서 어떻게 탐색 막대 아래의 나머지 공간에 iframe을 맞출 수 있습니까?

다른 설정을 시도했지만 다른 해상도 모니터에서는 작동하지 않습니다. 그리고 크로스 브라우저 (IE, Chrome, Safari, Mozilla, Opera에서 선호하는 브라우저)에서 작업해야하지만 필요하지는 않습니다.

죄송합니다. 조금 어리석은 사람이 도와 드릴 수 있습니까?

Answer 1

아주 간단합니다. 현재 뷰포트 높이에서 내비게이션 높이를 빼고 iframe의 높이로 설정하면됩니다. 이 자바 스크립트 방법을 사용하십시오 :

function ResizeIFrame() { 
    var nNavigationHeight = 43; // Assuming the 43px you stated above 
    var nViewHeight = document.body.clientHeight; 
    var nIframeHeight = nViewHeight - nNavigationHeight; 
    document.getElementById("YourIFrameID").style.height = nIframeHeight + "px"; 
} 

이 기능을 사용하려면 본문 및 html을 100 % 높이로 설정해야합니다.

body, html { 
    height: 100%; 
} 

나는 이것이 당신이 원하는 것을 달성하는 다소 모호한 방법이라고 언급해야하지만 질문의 문자에 대한 진정한 해결책입니다. 크로스 브라우저 두통이 최소화 될 것이므로 바닐라 Javascript 대신 Jquery를 사용하는 것이 좋습니다 (IE 7 & 8, FF, Chrome 및 Safari의 현재 설치에서이 코드를 테스트했지만 문제점없이 다를 수 있습니다). 이 경로를 결정했다면 div를 사용하여 우수하고 간단한 AJAX 기능을 활용하고 iframe 전체를 사용하지 않는 것이 좋습니다.