JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header"></div>
<div id="content">
    <iframe></iframe>
</div>
<div id="footer"></div>

CSS

#header {
    position   : absolute;
    top        : 0;
    left       : 0;
    width      : 100%;
    height     : 100px;
    background : red;
}
#content {
    position   : absolute;
    top        : 100px;
    bottom     : 100px;
    left       : 0;
    width      : 100%;
    background : gray;
}
#content > iframe {
    position   : relative;
    width      : 100%;
    height     : 100%;
    background : purple;
    opacity    : 0.5;
    filter     : alpha(opacity=50);
}
#footer {
    position   : absolute;
    bottom     : 0;
    left       : 0;
    width      : 100%;
    height     : 100px;
    background : blue;
}