javascript - 如何调整 Javascript 元素的大小以适应其容器窗口

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;

但即使我添加了 width:100% 和 height:100% 它似乎完全不受它的影响。唯一似乎改变其“大小”的是视口(viewport):

<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 的视口(viewport)比例进行设置。但我的目标确实是让 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');});