Resize of div is being ignored

Question

I have a super-simple web page that loads data from a server into s as containers. The problem is that sometimes images are too tall, and overflow and cause layout problems. So, I was looking to resize the divs using:

target.style.height = height; // As short form of:
document.getElementById('someId').style.height=height;

But so far NOTHING I've tried has worked. Here's the html file:

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body bgcolor="#E3FBFF" text="#000000" onload="loadImages();">
      <script type = "text/javascript">
        function loadImages()
        {
          ...Function omitted for brevity...
          But it gets to this line:
          document.getElementById(d0).style.height = height+10;
        }
  </script>
    <div id=d0></div>
    <hr>
    <div id=d1></div>
    <hr>
    <div id=d2></div>
    <hr>
    <div id=d3></div>
    <hr>
    </body>
    </html>

That's it!

I have found various articles like this one, or this one, but, they weren't helpful.

It occurs to me to mention that in my case I don't require the use of divs per se. I just need the images and related text to not overlap vertically (or horizontally). As it is, when the images load, it can be a real mess. ...How can I tell my divs to be full width with no overlay from the other divs? I tried using a class, using CSS, and more, all ignored.

I guess I was working under the improper assumption that divs, as block-oriented things, that even if you declare full width ("width=100%") can and will STILL overlap vertically depending on the contents placed in them.

what is 'height'? it seems you didnt declare it, also when setting height you should append 'px' or '%', just assigning a number wont work — Chris Li, Sep 11 '18 at 04:58
I believe @ChrisLi is correct, I just wanted to add that this is because `style` refers to a CSS property which is why it requires the unit. See: https://developer.mozilla.org/en-US/docs/Web/CSS/height and the first example you linked where they add `+ "px"` to the height value at the end. — Frish, Sep 11 '18 at 05:00
@ChrisLi OK, then, how to I ad "px" after my integer?! With a +"px"? — Richard T, Sep 11 '18 at 05:02

Frish · Answer 1 · 2018-09-11T05:03:05.267

2

Add a unit to your height variable. As you are editing the CSS style of the element this is required. See: MDN

document.getElementById('someId').style.height=height becomes: document.getElementById('someId').style.height = height.toString() + 'px'

edited Sep 11 '18 at 05:03

answered Sep 11 '18 at 05:02

Frish

1,371
10
20

try int.toString() – Frish Sep 11 '18 at 05:04

score 2 · Accepted Answer · answered Sep 11 '18 at 05:03

you didnt show what you assigned to 'height', but from your code i assume its an interger.

document.getElementById(d0).style.height = height+10;

style takes a string (ie 10px), so assigning number to it won't work, try the following

document.getElementById(d0).style.height = height+10+'px';

javascript will convert it to string for you
more on integer to string here What's the best way to convert a number to a string in JavaScript?

Resize of div is being ignored

2 Answers2

Linked