When building the website one of my challenges was adjusting the size of an iframe, canvas or img when changing the size of a window. The solution I found has a number of elements. In the example I'm going use an iframe. This can be replaced with a canvas or a img.
The first element is a script that allows to adjust the height and width of the iframe. The values - 28 for the width and - 160 for the height in the example were found by trail and error. they depend on the size of the margins, the header and the footer.
The second element is a trigger to activate the script. The activating is associated with two events: the onload event and the onresize event. The onload event ensures the correct size when opening the webpage and the onresize event when the webpage size is changed. Both events are included in the body tag.
The third element is assigning an id and a name to the iframe. (in the example "ContentFrame"). The id is important to running the script, the name to load content into the iframe using the script.
To ensure the correct behavior of the iframe (like the header and the footer), it is necessary to add a div tag to the HTML code.
The downloadable webpage resize-example.html is a full working example. This page works best if it is accompanied by the CSS sheet resize-example.css.