Set size of div using javascript

Question

I have a div with id="test" What I am trying to do is to resize the div to body.clientHeight-80px . So that the height of the element fills all the visible space on a browser window (without scrolling) except the 80px high header. I have js code as below:

let Height = document.body.clientHeight-80;
let myElement = document.getElementById("test");
myElement.style.height = Height;

The code will work fine if I use something like :myElement.style.height = "600px";. I think the problem is that document.body.clientHeight; is returning a value without the unit px.

Roko C. Buljan · Accepted Answer · 2020-06-22 23:39:22Z

3

Concatenate "px"

myElement.style.height = Height + "px";

and PS: use const, not let. Also preferably, if Height is not a Function that returns Methods (or a Class) use it as lowercase height.

Use CSS, not JS

#test{
   height: calc(100vh - 80px);
}

if 100vh (Viewport Height) was your intention.

Example:

/*QuickReset*/*{margin:0; box-sizing:border-box;}

:root {
  --height-head: 80px;
}

#head {
  height: var(--height-head);
  background: #eee;
  position: sticky;
  top: 0;
  z-index: 1000;
}

#test {
  height: calc(100vh - var(--height-head));
  background: #0bf;
}

#main {
  min-height: 60vh;
  background: #aaa;
}
#foot {
  min-height: 20vh;
  background: #444;
  color: #fff;
}

<header id="head">HEADER</header>
<div id="test">GALLERY calc(100vh - 80px)</div>
<main id="main">MAIN</main>
<footer id="foot">FOOTER</footer>

edited Jun 22, 2020 at 23:39

answered Jun 22, 2020 at 23:25

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

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

Collectives™ on Stack Overflow

Set size of div using javascript

1 Answer 1

Use CSS, not JS

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Use CSS, not JS

Comments

Your Answer

Sign up or log in

Post as a guest

Related