NAV2017:How to set Add-in Graphical area size inside a page (javascritp)

Hi to all,
I would like to do a Javascript control Add-in to draw something inside a page.

I would like it occupies the 100% of NAV page (100% of the field, inside a group in a container) and I would like it resizes when the page resizes.

I tested it with a drag and drop add in I found on Vjeko page.
I tried to play with many parameters of the CSS and with the Manifest xml file, but the result is never what I want.

I think the problem is inside NAV (or related to the way NAV interact with the addin) because in a simple HTML Page I get what I want.

This is what I've got until now (I added the same Page part to a factbox and as a part of the main Container)



The Height Of the Factbox, included the Delete Picture button is the same of the height of the image, inside the main body, and It looks exactly the size in the Manifest.XML file. As u can see, there is no button in the main body, due to the height of the control.



This is the part related to the controls hierarchy (forget about any compiler errors, because I just added some returns to the inline code):


This is the CSS with (part) of my attempts:



What I would like to achieve is that the add-in area is as large as the main page area (width 100%, Height 100%), respecting a minimum size (so with scroll bars if needed), and that the appearance in the Web Client is the same of the RTC client.

Thanks in advance
Davide

(Note: forget about any copyright on the pics. It is mine)