JSFiddle - React, Tailwind, and code Playground

by chrisallenmoore

HTML

<body>
<div id="wrapper">wrapper
    <div id="viewer_wrapper">viewerwrapper
        <iframe src="http://www.rocketglow.com/" frameborder="0" id="viewer"></iframe>
        after iframe
    </div>
    after viewerwrapper
</div>
</body>

CSS

body, html {
    height: 100%;
}
#wrapper {
    min-height:100%;
    height: 100%;
    /*it's this that seems to trip me up - a fixed height works for the problem, but not for the layout obviously*/
    position:relative;
}
#viewer_wrapper {
    height:100%;
    /*position:relative;*/
    overflow:hidden;
}
#viewer {
    position: relative;
    top:0;
    height: 96%;
    width:100%;
    margin-bottom: -1000px;
    padding-bottom: 1000px;
}