How to embed an AGOL app on a website so the iframe fills the whole viewport?

deleted-user-zc_J5JescS67 — Sun, 04 Jun 2017 19:25:03 GMT

Hi. I'm embedding an AGOL app on a website, viewable here. I'd like to format the map so it fills the entire viewport, so it is not necessary to scroll down to the bottom of the page. HTML 5 does not support iframe declarations, and in the code you can see my attempts at altering the iframe through .css and .js.

I'm sure this is a very basic issue- any advice appreciated, thanks!

Code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="embed-container" content="width=device-width, initial-scale=1">
    <title>Portland Cycle Safety Map</title>
    <link rel="icon" href="https://community.esri.com/icons/cog.svg">

    <script type="application/javascript">

function resizeIFrameToFitContent( iFrame ) {

iFrame.width = iFrame.contentWindow.document.body.scrollWidth;
iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
}

window.addEventListener('DOMContentLoaded', function(e) {

    var iframes = document.querySelectorAll("iframe");
    for( var i = 0; i < iframes.length; i++) {
        resizeIFrameToFitContent( iframes );
    }
} );
</script>

topic How to embed an AGOL app on a website so the iframe fills the whole viewport? in Developers Questions

How to embed an AGOL app on a website so the iframe fills the whole viewport?