Member Avatar for anandhikrishnan

Hi All,


Can any one please guide me how to draw my IFRAME based on window size. Thanks in advance....

  • 3 Contributors
  • 2 Replies
  • 102 Views
  • 16 Hours Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

Two practical approaches will solve "draw an IFRAME based on window size": a CSS-only layout for simple header/footer cases, and a small JavaScript routine when offsets are dynamic or older browsers must be supported. 's pointer to JS is valid; 's demo is a good starting point but uses an old-style resize hookup that effectively calls the sizer once instead of registering it as the resize handler — prefer addEventListener('resize', ...) or assign the function reference.

CSS-first (modern, simplest). Use viewport units, calc(), or flexbox so the iframe just fills available space without script:

html, body { height:100%; margin:0; }
.wrapper { display:flex; flex-direction:column; height:100%; }
.header { height:60px; } /* any fixed header height */
iframe { flex:1 1 auto; width:100%; border:0; display:block; }

JavaScript when needed. Calculate available height, subtract header/footer offsets, then set iframe.style.height. Add a debounced resize handler and call it on load and orientationchange:

function setIframeHeight() {
  var header = document.getElementById('header');
  var available = window.innerHeight - (header ? header.offsetHeight : 0);
  document.getElementById('extern').style.height = available + 'px';
}
window.addEventListener('resize', debounce(setIframeHeight, 100));
window.addEventListener('load', setIframeHeight);

When the iframe must match its content height, same-origin pages can read iframe.contentDocument to compute scrollHeight. For cross-origin frames, use window.postMessage inside the framed page to send its height to the parent and have the parent resize the iframe. See MDN for details on CSS calc and the postMessage API: CSS calc and postMessage (MDN).

Recommended Answers

All 2 Replies

Member Avatar for Arkinder

JavaScript can do it. Ask over there.

Regards
Arkinder

Member Avatar for almostbob

demo

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<script type="text/javascript">
<!--
function sizer() {
var viewportheight;
if (typeof window.innerWidth != 'undefined') { viewportheight = window.innerHeight }
else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) { viewportheight = document.documentElement.clientHeight }
else { viewportheight = document.getElementsByTagName('body')[0].clientHeight }
document.getElementById('extern').style.height=viewportheight-26 + 'px'; }
document.onresize = sizer(); 
//--></script>
<!--[if IE]>
<script type='text/javascript'>window.onresize=sizer;</script>
<![endif]-->
<title>page</title>
</head>
<body onload='sizer();' style='margin:0;padding:0;height:100%;text-align:center;'>
<div style='height:23px;width:100%;text-align:center;'>
<a href='home.html'>&nbsp;Return to referring&nbsp;page&nbsp;</a></div>
<iframe name='extern' id='extern' frameborder='0' width='100%' height='200px' src='whatever.htm'>loading frame</iframe></body></html>
Edited by almostbob because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.