JSFiddle - React, Tailwind, and code Playground

by Michel Penke

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Example: Setting Iframe Height to Match Content Height</title>

<link rel="stylesheet" href="https://www.dyn-web.com/lib/css/page_v2.css" />
<link rel="stylesheet" media="screen and (max-width: 900px)" href="https://www.dyn-web.com/lib/css/small_v2.css" />
<script src="https://www.dyn-web.com/lib/js/page_v2.js" type="text/javascript"></script>
<style type="text/css">
iframe#ifrm {
    border:1px solid #ccc;
    margin:.6em 0 .6em;
    width:99%;
    height:100px;
    }
</style>
<script type="text/javascript">

function getDocHeight(doc) {
    doc = doc || document;
    // from http://stackoverflow.com/questions/1145850/get-height-of-entire-document-with-javascript
    var body = doc.body, html = doc.documentElement;
    var height = Math.max( body.scrollHeight, body.offsetHeight, 
        html.clientHeight, html.scrollHeight, html.offsetHeight );
    return height;
}

function setIframeHeight(id) {
    var ifrm = document.getElementById(id);
    var doc = ifrm.contentDocument? ifrm.contentDocument: ifrm.contentWindow.document;
    ifrm.style.visibility = 'hidden';
    ifrm.style.height = "10px"; // reset to minimal height in case going from longer to shorter doc
    // some IE versions need a bit added or scrollbar appears
    ifrm.style.height = getDocHeight( doc ) + 4 + "px";
    ifrm.style.visibility = 'visible';
}
</script>
</head>
<body>


<div id="container">

    <div id="header">
        <ul id="header_nav">
            <li><span id="logo"><a href="https://www.dyn-web.com/">Dynamic Web Coding</a></span></li>
            <li><a href="/tutorials/">Tutorials</a></li>
            <li><a href="/javascript/">JavaScript</a></li>
            <li><a href="/php/">PHP</a></li>
            <li><a href="/sitemap.php">Site Map</a></li>
        </ul>
    </div>
    
    <div id="main" class="cf">
    
    
        <div...