Aquí está mi iframe, está dentro de un div con botón

  	function myFunction() {
    	var url =document.getElementById("myFrame").getAttribute("src");
    	var newUrl = url.substring(0,url.indexOf("width")) + "width=320&height=270";
    	document.getElementById("myFrame").setAttribute("src",newUrl);
    	document.getElementById("myFrame").setAttribute("style","border:none;overflow:hidden;width:320px;height:270px;");
      }

  <div style="width:auto;height:auto;" id="mydiv">
    
       <iframe id="myFrame" src="http://domain.com/page.php?width=400&height=400" height="400" width="400"></iframe>
    
    </div>
    
    <button onclick="myFunction()">Change Size</button>

Lo que necesito aquí es que mi código funciona, cambiará el tamaño del iframe y su enlace src es el tamaño. Pero como puede ver, mi div con id de "mydiv" tiene ancho y alto de estilo es automático. Lo que necesito es que mi código también sea 100% de ancho completo en ancho y alto cuando hago que la ventana sea más grande, ese div aumenta el tamaño, pero el iframe no cambia porque tiene un tamaño fijo.

Yo he tratado

("style","border:none;overflow:hidden;width:100%;height:100%;")

("width")) + "width=100%&height=100%"

Pero no funciona correctamente. O el iframe está en mal estado, pero no funciona bien. Espero que entiendas que realmente necesito ayuda en esto.