如何调整Java Script元素的大小以适应其容器窗口

Question

我正面临着一个我无法理解的问题.

我有一个webview(在Android和iOS上),它可以有3种可能的大小之一,具体取决于我在哪里显示它.(例如600 x 50或500 x 45)

使用CSS我设法使图像始终显示为填充100%的webview.然而,还有另一个元素,我必须使它也填充这个容器的100%.此元素加载以下代码:

<div class='amoad_native' data-sid='123456789'></div>          

<script src='http://j.amoad.com/js/n.js' type='text/javascript' charset='utf-8'></script>

我还应用以下CSS:

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

但即使我添加宽度:100%和高度:100%它似乎完全不受它的影响.唯一似乎改变其"大小"的是视口:

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

但这似乎有所不同,具体取决于我使用的设备.

这就是它在iPhone 5上的样子:

这就是它在iPhone 6s Plus上的样子

两者都使用0.9的视口比例设置.但我的目标确实是让PR Box完全填满其容器.(你可以看到相同的图像,因为这只是我显示的正常图像,以防由于没有互联网连接或其他东西无法加载PR Box.

Answer 1

您可以尝试 jquery 解决方案，我不太确定您想要实现什么，但希望这会有所帮助。

演示： 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');});