html5 canvas 'fit in view' (responsive) mode: how to account for other divs on the page?

[Leif5FDE]

I'm publishing to html5 canvas and in my Publish Settings, I have checked "make responsive" by both height and width.  In "scale to fill visible area" I have selected "fit in view".  The goal is to allow the canvas app to stretch to be fully visible regardless of the viewport's dimensions.

Now I'm trying to integrate this into a real web page.  For example, what if I add a <div> at the top to contain some navigation links.  Pasting such a div into the Animate-generated html code (above the animation_container div) has the result that the page no longer gets it quite right when adjusting to a changing viewport: In this case, a viewport with a short, wide aspect ratio leaves part of my canvas cut off at the bottom of the window, because it doesn't know that extra div is pushing everything down.

Based on other threads, I gather that the makeResponsive() code in the Animate-generated .js file needs to be tweaked?  I am over my head here, and hoping for some very basic tips to make very basic adjustments on the page.

[Leif5FDE]

Correction - "stretch" was a poor word choice, I meant: allow the canvas app to resize (with fixed aspect ratio) to remain full visible regardless of viewport dimensions.

Here's a quick fix that seems to work: Edit the resizeCanvas() function inside the .js file like this:

var navMenuHeight = document.getElementById("nav_menu").offsetHeight;
var iw = window.innerWidth, ih=window.innerHeight-navMenuHeight;

This seems to fix the resizing function, by accounting for the height of a <div id="nav_menu"> that I have placed above the animation_container div.

I'll probably build on this idea, as I add more elements to the page, to allow Animate's javascript to adjust accordingly.