Changing Height in CSS with Variable in JavaScript

Question

So I'm trying to make the height of my DIV's respond to the width of the window. The code:

var w = window.innerWidth;
var mathW = parseInt(w);
var divHeight = mathW*0.16;
document.getElementById('demoDiv').style.height = divHeight;

With the CSS being:

#demoDiv {
   margin: auto;
   background-color: red;
   width: 100%;
   height: 50px; //just to start with SOMETHING
}

Obviously I'm having trouble with that! I've played around with it and definitely can change the height if I just use regular integers, but even using parseInt('divHeight') did nothing for me!

document.getElementById('demoDiv').style.height = divHeight+"px"; — Suresh Atta
– Suresh Atta, Commented Feb 28, 2018 at 5:16
I don't know how in javascript, but in jQuery, you need to use resize() — Carl Binalla
– Carl Binalla, Commented Feb 28, 2018 at 5:16
You still haven't explained why you want to use Javascript for a task that is so easy to solve using only CSS. — connexo
– connexo, Commented Mar 2, 2018 at 0:01

void · Accepted Answer · 2018-02-28 05:19:13Z

3

You are calucalting the height in a correct way. But in order to set the height you need to add dimension to the value (say px).

You dont need to do parseInt as window.innerWidth is a property with typeof number.

var w = window.innerWidth;
var divHeight = mathW*0.16;
document.getElementById('demoDiv').style.height = divHeight+"px";

answered Feb 28, 2018 at 5:19

void

36.7k10 gold badges71 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Tyler Lancaster Over a year ago

Oh my god I'm an idiot!! Thank you I'll mark this as answered when it lets me.

connexo Over a year ago

Why would anyone do this with JS at all?

void Over a year ago

@connexo with what you will do this then?

connexo Over a year ago

height: 16vw;, see my answer below. It's what comes to mind first when presented with this task.

void Over a year ago

And how does that answers OPs question? He is asking why his code is not working... There are always multiple way you can take to reach a destination and most of the times multiple ways could be correct :)

|

connexo · Accepted Answer · 2018-02-28 14:07:10Z

0

What stops you from applying a pure CSS solution?

#demoDiv {
  height: 16vw;
}

Requires no Javascript, is much shorter and performs faster, and no need to apply any resize handler when window size changes.

answered Feb 28, 2018 at 14:07

connexo

57.2k15 gold badges112 silver badges149 bronze badges

Collectives™ on Stack Overflow

Changing Height in CSS with Variable in JavaScript

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related