javascript - How to resize a Java Script element to fit its container window -

i facing issue can't understand.

i have webview (on android , ios) can have 1 of 3 possible sizes depending on showing it. (for example 600 x 50 or 500 x 45)

using css have managed make image appear fill 100% of webview. there element have make fill 100% of container. element loaded following code:

<div class='amoad_native' data-sid='123456789'></div>            <script src='http://j.amoad.com/js/n.js' type='text/javascript' charset='utf-8'></script> 

and apply following css it:

position: absolute; z-index: 2; left: 0; top: 0; 

but if add width:100% , height:100% seems unaffected it. thing seems change "size" viewport:

<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> 

but seems render differently depending on device im using.

this how looks on iphone 5:

and how looks on iphone 6s plus

both set using viewport scale of 0.9. goal pr box fill container. (you can see same image behind because thats normal image show in case pr box couldn't loaded due no internet connection or something.

you can try jquery solution, not quite sure u r trying achieve hope helps.

demo: https://jsfiddle.net/po6vdyo9/

  $(document).ready(function() {  $(window).resize(function() {    // height calculated acording window height can changed whaterver element u require   var docheight = $(window).outerheight();    function resizebanner() {     $('#banner').height(docheight);   }    resizebanner();  }) $(window).trigger('resize');});