Adjust the size of a div element with JavaScript

Question

Adjust the size of a div element with JavaScript

Currently, I am facing a challenge with resizing a div with the id="test". My goal is to adjust the size of the div based on the height of the browser window subtracting 80px so that the element fits perfectly within the visible space without requiring scrolling. Here is the JavaScript code I have been using:

let calculatedHeight = document.body.clientHeight - 80;
let targetElement = document.getElementById("test");
targetElement.style.height = calculatedHeight + "px";

While setting the height directly like this works:

myElement.style.height = "600px";

, when trying to calculate it dynamically using document.body.clientHeight;, the issue arises because it returns a value without the "px" unit.

javascript html css

Answer 1

Answer №1

Combine the string "px"

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

and PS: utilize const, instead of let. Additionally, if Height is not a method-returning function (or a class), consider using it as lowercase height.

Employ CSS, not JS

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

if your intention was to target 100vh (Viewport Height).

Illustration:

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

Answer 2

Combine the string "px"

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

and PS: utilize const, instead of let. Additionally, if Height is not a method-returning function (or a class), consider using it as lowercase height.

Employ CSS, not JS

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

if your intention was to target 100vh (Viewport Height).

Illustration:

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

Adjust the size of a div element with JavaScript

Answer №1

Employ CSS, not JS

Similar questions

Caution in Three.JS: Potential WebGL Issue with Texture Mapping in Material Creation

One-time export feature similar to Typescript's export_once functionality

Exploring the world of jQuery AJAX alongside Google's currency calculator

What are the steps involved in searching for a document in MongoDB with Mongoose?

The link background color is malfunctioning

The act of linking an SVG image from the same SVG file can result in the disappearance

Using jQuery to modify a CSS property when a specific option is chosen

The toThrow() function in Jest seems to be malfunctioning

Require a selection from the menu on the right side needed

ReactJS components enhanced with bootstrap-table JS extension

Issues with using hooks in a remote module in Webpack 5 module federation

Obtaining the value of an object with a key containing a space and special character in both the key and object name using Node.js

Empty MongoDB array persists even after POST request

Alignment of text to the left can be achieved by using either relative or absolute

jQuery - patience is required until all elements have completely faded away

Can you create a dropdown menu using information from one JSON file and have the selected option come from another source?

What is the best way to ensure that the state is updated only when the user begins typing in a text

Using NodeJS to generate a multipart/mixed response

What's the most effective method for isolating elements in HTML to prevent one element from impacting another?

What is the best way to show "no results found" message in a jQuery search list?