How do you give iframe 100% height

Cross-browser compatibility

An important aspect of web development is making your website look consistent across all browsers. To ensure your iframe maintains 100% height, test it in various browsers like Chrome, Firefox, Safari, and Edge.

<!-- 🦊Hey Firefox, try to break this! -->


Responsive sizing with viewport units

Employ the use of the CSS viewport units like the 100vh unit, which is equivalent to 100% of the viewport's height.

.iframe-container iframe {
  height: 100vh; // 👀 Look mom, no hands, I'm responsive!
}


However, on mobile browsers 100vh can sometimes include the browser's address bar causing an unexpectedly taller iframe.

Media queries for dynamic adjustment

CSS media queries can be used to dynamically adjust the iframe height according to screen sizes or orientations.

// For screens smaller than 600px
@media (max-width: 600px) {
  iframe { 
    height: 50vh; // 💪 Going on a diet, cutting back to 50vh
  }
}


This would ensure that your iframe is tailor-made for varying device sizes.

JavaScript for custom solutions

JavaScript can be employed to dynamically resize iframes based on content, especially when the height is not known or changes periodically.

// 🤖 Auto-adjustment in progress...
function resizeIframe(iframe) {
  iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
}

window.onload = function() {
  var iframes = document.querySelectorAll('iframe');
  iframes.forEach(resizeIframe);
};


Structuring your CSS carefully

Positioning and structuring your elements properly can prevent unwanted scrolling or overlapping issues. This is important when dealing with dynamic content within iframes.

.iframe-container {
  overflow: auto; // 🌊 Keep the flood (scrollbars) at bay
}


Harnessing the power of frameworks

CSS frameworks like Bootstrap or Foundation provide ready-made classes for responsive iframes, simplifying the task of making your iframe look great on all devices.

Filling up the viewport

To ensure your iframe fills the viewport and isn't affected by other elements, set its position to absolute within a relative container.

.iframe-container {
  position: relative; 
  height: 100vh;
}

.iframe-container iframe {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%;  // 📏 Measure twice, iframe once!
  height: 100%;
}


Dealing with dynamic inner content

If the iframe content defines the height, the approach can be reversed, wherein JavaScript or iframe's onload event is used to adjust the height dynamically.

<div class="content-wrapper">
  <iframe id="auto-resize" src="example.html"></iframe>
</div>


HTML5 and iframes

Though iframes do not naturally support percentage heights as per HTML5 specifications, the methods mentioned above allow for the creation of flexible, full-height iframes.