【问题标题】：How to resize a Java Script element to fit its container window如何调整 Javascript 元素的大小以适合其容器窗口
【发布时间】：2016-05-12 01:39:03
【问题描述】：

我正面临一个我真的无法理解的问题。

我有一个 webview（在 android 和 iOS 上），它可以有 3 种可能的尺寸之一，具体取决于我显示它的位置。（例如 600 x 50 或 500 x 45）

使用 CSS，我设法使图像始终显示为 100% 的 web 视图。然而，还有另一个元素，我必须让它也填满这个容器的 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。

【问题讨论】：

如果你这样做width:100vw; height:100vh; 会怎样？
我在这里找到了几个解决您问题的方法：stackoverflow.com/questions/1230354/… 我认为最可取的是Logesh Paul 的答案，试试吧。
请贴出可以重现此问题的代码sn-p。
你是否在 div 中附加 img。 amoad_native 容器？你能试试background-image: url() center center no-repeat; background-size: cover 或w3schools.com/cssref/css3_pr_background-size.asp 的其他东西吗
我可能对情况没有完全了解，但是为什么不能只从父级继承样式并覆盖宽度/高度样式？

标签： javascript android html ios css

【解决方案1】：

试试这个：

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

【讨论】：

它似乎对java script元素没有任何影响
您确定 css 实际应用到了正确的元素吗？（尝试添加边框：1px 纯红色；进行测试）
是的，因为它是唯一指示其位置的元素（我只有 2 个元素，一个是图像）。我确实注意到了一些有趣的事情，似乎在 android 上它有时会起作用并缩放它以适应宽度，但似乎只有在重新加载 webview 并且之前已经加载过 html 时才会发生。
嗯，你是如何应用 css 的？你可以试试内联样式：<img src="whatever" style="css stuff" />
也可以试试!important 而不是;

【解决方案2】：

您可以尝试一个 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');});

【讨论】：

我尝试了所有其他答案，而 java 的东西似乎完全忽略了 css，可能是因为它不是在开始时而是在几秒钟后加载的。这个似乎正确地影响了大小，尽管有时它有时会起作用，有时却不起作用。 “on document ready”功能是否知道其他 java 何时完成加载？有没有办法知道那个什么时候完成加载？或者也许只是隐藏内容并在加载后显示它然后调整它的大小？（我给你赏金，因为它的时间今天到期了，这有点为我指明了正确的方向。）
谢谢@Chiquis 我真的很感激。我给出的脚本将在文档完成加载后执行。我找到了一个非常有用的链接，希望对您有所帮助。 :) stackoverflow.com/questions/11258068/…

【解决方案3】：

使用vh 和vw：

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

【讨论】：

不影响 PR Box。

【解决方案4】：

1) 确保 webview 实际上是您想要的大小。可能是内容很好，但 webview 的大小/位置不正确。

2) 确保 html 文档中 amoad_native 的父元素填充 webview 区域。设置这个人的高度和宽度。

如果你有两个子元素并且你希望它们都填充父元素，你应该有这样的结构：

HTML

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>

CSS

.parent {
  height: 100%;
  width: 100%;
}

.child {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%
}

【讨论】：

【解决方案5】：

父母是相对的？

<div class="parent">
  <img src="http://static.tumblr.com/a4deb37c05fa96b6128b0e097d45c745/oud8baz/mKQmt73js/tumblr_static_sky_banner.jpg" class="theimage">
  <div>
    
    <style>
    html,body{
    width:100%;
    margin:0 auto;
       }
    .parent{
float:left;
position:relative;
float:left;
width:100%;
height:200px;
}

.theimage{
position: absolute;
width:100%;
height:100%;
z-index: 2;
top: 0;
left: 0;
margin:0;
padding:0;
}
      
      
    </style>

【讨论】：

【解决方案6】：

我认为您可以通过对某些目标 css 应用旧式重置来解决此问题。您可能会得到一些由不同浏览器应用的默认填充或边距。尝试应用这个：

*{
padding: 0 0 0 0;
margin: 0 0 0 0;
border-collapse: collapse;
border-spacing: 0;
border: 0 0 0 0;
}
#My_Image{  
             -webkit-box-sizing: border-box;
             -moz-box-sizing: border-box;
             box-sizing: border-box;
             height:100%;
             width:100%;
}

在那里，即使您不能覆盖默认填充/边距，这也应该可以工作，因为 box-sizing 属性将它们计为高度/宽度的一部分。

【讨论】：

我没有得到赏金？ XD

【解决方案7】：

您似乎遇到了像素比的问题。

在 iPhone 5 中像素比例为 2，但在 iPhone 6 Plus 中像素比例为 3。因此，如果图像尚未准备好用于视网膜显示，您将在具有高像素比的设备中获得少量图像。

您可以使用background-size。但是，您将在此处获得的解决方案纯属猜测，因为您不与我们分享呈现的 HTML，我们无法为您提供更好的帮助。

我的建议：将此添加到框中（如果图像是背景）：

background-size: cover;
width: 100%;

如果图片是<img>标签：

width: 100%;
height: auto;

【讨论】：

【解决方案8】：

我无法使用该脚本标签加载资源。这是一个始终占据 100% 宽度的横幅。我的元标记与您的略有不同。也许这就是问题所在。

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            html, body {
                height: 100%;
                padding: 0px;
            }
            #banner {
                position: absolute;
                z-index: 2;
                left: 0;
                top: 0;
            }
        </style>
    </head>
    <body>
        <div>
            <img id="banner" src="https://upload.wikimedia.org/wikipedia/commons/6/67/Ha_Long_bay_%28Vietnam%29_banner_Islands_in_the_bay.png" />
        </div>
        <script>
            var banner = document.getElementById("banner");
            banner.style.width = '100%';
        </script>
    </body>
</html>

【讨论】：

【解决方案9】：

我在使用 google 趋势嵌入 javascript 时遇到了同样的问题，脚本高度未显示完整数据我通过定位 div 样式和 div 内的所有元素解决了这个问题。

我确实注意到在 CSS 中使用 * 确实有效，但单独使用它的缺点是，如果您有一个包含大量数据的大型网站，它将调整所有元素的大小，而不是大多数人想要的。

但是您仍然可以通过定位 div 和内部的任何内容来使用 *。您的脚本标签，这只会调整您的脚本标签的大小并保持您的页面样式完好无损。

HTML 文档头

href="style.css"
我不确定这是否很重要，但我使用了外部样式表来调整元素的大小，这可能对不确定的工作起到至关重要的作用。

<link rel="stylesheet" type="text/css" href="style.css">

HTML 文档正文

DIV
div 帮助我们设置脚本标签的样式。

id="目标"
我们将使用它作为调整大小的目标 ID。

src="script.js"
我们将使用外部文档，这可能会或可能不重要，但我使用了外部 .js 文件，但我遇到了高度问题，并且它可以正常工作。

<div id="target">
    <script type="text/javascript" src="script.js"></script>
</div>

CSS 文档

#target
以 div 标签的 id 为目标。

>
选择 div 标签内的元素。

*
将样式应用于所有元素。

#target > * {
    width: 100%;
    height: 500px;
}

【讨论】：