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.

I have found several solution to your problem here: http://stackoverflow.com/questions/1230354/how-to-get-a-div-to-resize-its-height-to-fit-container What I think most preferable will be the answer of [Logesh Paul](http://stackoverflow.com/users/148466/logesh-paul) Just try it. — Jaffer Wilson, Feb 06 '16 at 06:01
Do you append img inside div. amoad_native container? Could you try `background-image: url() center center no-repeat; background-size: cover` or something else from http://www.w3schools.com/cssref/css3_pr_background-size.asp — doubleui, Feb 10 '16 at 11:28
I might not have a complete understanding of the situation, but why can't you just inherit style from the parent and override the width/height styles? — M. Carlson, Feb 11 '16 at 22:08

score 2 · Accepted Answer · answered Feb 06 '16 at 06:05

2

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

answered Feb 06 '16 at 06:05

Akshay

1,344
11
17

I tried all the other answers and the java thing just seems to ignore the css completely, might be because it is not loaded at the start but after a few seconds. This one seemed to affect the size correctly, althought sometimes it worked sometimes it didnt. does the "on document ready" function knows when the other java has finished loading? is there a way to know when that one finished loading? or perhaps just hide the content and show it after it has been loaded and then resize it? (I'm giving you the bounty since the time on it expires today and this kinda points me in the right direction.) – Pochi Feb 13 '16 at 09:16
Thanks @Chiquis I really appreciate it. The script i have given will execute after the document has finished loading. I have found a very useful link which I hope might help you for sure. :) http://stackoverflow.com/questions/11258068/is-it-possibile-to-wait-till-all-javascript-files-are-loaded-before-executing-ja – Akshay Feb 14 '16 at 05:35

score 1 · Answer 2 · answered Feb 03 '16 at 06:09

1

Try this:

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

answered Feb 03 '16 at 06:09

seahorsepip

4,519
1
19
30

it doesn't seem to have any effect on the java script element – Pochi Feb 04 '16 at 01:33
Are you sure the css is actually applied and to the correct element? (Try adding border: 1px solid red; to test) – seahorsepip Feb 04 '16 at 04:02
yeah, because its the only element that indicates its position (i only have 2 elements and one is the image). I did notice something interesting, it seems that on android it will sometimes work and scale it to fit the width, but only seems to happen when the webview is reloaded and the html has already loaded before. – Pochi Feb 06 '16 at 01:53
Hmm how are you applying the css? You can try inline styles: ```` – seahorsepip Feb 06 '16 at 12:32
Also try ``!important`` instead of ``;`` – seahorsepip Feb 06 '16 at 12:33

score 1 · Answer 3 · answered Feb 06 '16 at 06:13

1

Use vh and vw:

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

answered Feb 06 '16 at 06:13

Tarun Dugar

8,921
8
42
79

it doesn't affect the PR Box. – Pochi Feb 06 '16 at 09:02

score 1 · Answer 4 · answered Feb 09 '16 at 08:15

1) Make sure the webview is actually the size you want it to be. Could be that the content is fine but the webview isn't sized/positioned correctly.

2) Ensure that the parent element to amoad_native in the html doc fills the webview area. Set the height and width of this guy.

If you have two child elements and you want them both to fill the parent you should have structure like this:

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%
}

score 1 · Answer 5 · answered Feb 10 '16 at 23:20

The parent is relative?

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

Doomer · Answer 6 · 2016-02-11T16:20:41.847

I think you can fix this by applying an old school reset to some targeted css. You probably get some default padding or margin applied by different browsers. Try to apply this:

*{
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%;
}

There, this should work even if you can't override default padding/margin because the box-sizing property count those as part of height/width.

score 1 · Answer 7 · edited Feb 13 '16 at 12:47

It seems that you are facing issues with the pixel ratio.

In iPhone 5 the pixel ratio is 2, but in iPhone 6 Plus the pixel ratio is 3. So if the images isn't ready to retina displays you'll obtain a little image in devices with high pixel ratio.

You can use background-size. However, the solutions you'll obtain here will be pure speculation, since you don't share with us the rendered HTML we are unable to help you better.

My suggestion: add this to the box (if the image is a background):

background-size: cover;
width: 100%;

If the image is a <img> tag:

width: 100%;
height: auto;

score 0 · Answer 8 · answered Feb 13 '16 at 01:20

I was not able to load the resource with that script tag. Here is a banner that always takes up 100% width. My meta tag is slightly different from yours. Maybe that was the issue.

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

score 0 · Answer 9 · answered Mar 16 '18 at 19:55

I had the same problem with googles trend embed javascript, the script height was not showing the full data I fixed the problem by targeting a div style and all elements inside the div.

I did notice that using the * in CSS does work but the CON of using it alone is if you have a large site with a lot of data it will resize all your elements, not what most people want.

But you can still use the * by targeting a div and anything inside eg. your script tags, this will only resize your script tag and keep the style of your page intact without problems.

HTML Document Head

href="style.css"
I am not sure if it matters much but I used an external style sheet for the resizing of the elements, this may play a crucial part into this working not sure.

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

HTML Document Body

DIV
The div helps us style the script tag.

id="target"
We will be using this as our target ID for resizing.

src="script.js"
We will be using an external document, this may or may not matter but I used an external .js file I was having problems with the height and it works fine this way.

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

CSS Document

#target
Targets the id of the div tag.

>
Sellect elements inside the div tag.

*
Applys style to all elements.

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

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

9 Answers9

HTML

CSS

HTML Document Head

HTML Document Body

CSS Document