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

Question

I am facing an issue i really can't understand.

I have a webview (on android and iOS) which can have one of 3 possible sizes depending on where i am showing it. (for example 600 x 50 or 500 x 45)

Using CSS i have managed to make an image always appear to fill 100% of the webview. However there is another element that i have to make it also fill 100% of this container. This element is loaded with the 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 i also apply the following CSS to it:

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

But even if i add the width:100% and height:100% it seems completely unaffected by it. The only thing that seems to change its "size" is the viewport:

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

But this seems to render differently depending on the device im using.

This is how it looks like on iPhone 5:

And this is how it looks like on iPhone 6s Plus

Both are set using a viewport scale of 0.9. But my goal really is for the PR Box to fully fill its container. (You can see the same image behind because thats just a normal image that i show in case the PR Box couldn't be loaded due to no internet connection or something.

Answer 1

You can try a jquery solution, I am not quite sure what u r trying to achieve but hope this helps.

Demo: https://jsfiddle.net/po6vdyo9/

  $(document).ready(function() {

$(window).resize(function() {

  // Height will be calculated acording to window height can be changed to whaterver element u require
  var docHeight = $(window).outerHeight();

  function resizebanner() {
    $('#banner').height(docHeight);
  }

  resizebanner();

})
$(window).trigger('resize');});

Answer 2

Try this:

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

Answer 3

Use vh and vw:

min-width: 100vw;
min-height: 100vh;