HTML文件头

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

Answer 2

试试这个：

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

Answer 3

使用vh和vw：

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

Answer 4

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

2）确保html doc中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%
}

Answer 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>

Answer 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属性将它们计算为高度/宽度的一部分。

Answer 7

您似乎面临像素比问题。

在iPhone 5中，像素比率 2 ，但在iPhone 6 Plus中，像素比率 3 。因此，如果图像不准备用于视网膜显示，您将在具有高像素比的设备中获得一个小图像。

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

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

background-size: cover;
width: 100%;

如果图片是<img>标记：

width: 100%;
height: auto;

Answer 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>

Answer 9

我有同样的问题与谷歌趋势嵌入javascript，脚本高度没有显示完整的数据我通过瞄准div样式和div内的所有元素修复了问题。

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

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

HTML文件头

HREF =＆＃34;的style.css＆＃34;
我不确定它是否重要，但是我使用了外部样式表来调整元素的大小，这可能对这个工作起着关键作用，不确定。

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

HTML文档正文

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

ID =＆＃34;目标＆＃34;
我们将使用它作为调整大小的目标ID。

SRC =＆＃34;的script.js＆＃34;
我们将使用外部文档，这可能或不重要，但我使用外部.js文件，我有高度问题，这样做很好。

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

CSS文档

#target
定位div标签的id。

＆GT;
选择div标签内的元素。

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

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

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

9 个答案:

HTML

CSS

HTML文件头

HTML文档正文

CSS文档