How to set the maximum height of an element with JavaScript?


Use the maxHeight property in JavaScript to set the maximum height. You can try to run the following code to set the maximum height of an element with JavaScript −

Example

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
   #box {
      width: 300px;
      background-color: gray;
      overflow: auto;
   }
</style>
</head>
<body>
<p>Click below to set Maximum height.</p>
<button type="button" onclick="display()">Max Height</button>
<div id="box">
<p>This is a div. This is a div. This is a div.<p>
<p>This is a div. This is a div. This is a div.<p>
<p>This is a div. This is a div. This is a div.<p>
<p>This is a div. This is a div. This is a div.<p>
<p>This is a div. This is a div. This is a div.<p>
</div>
<br>
<script>
   function display() {
      document.getElementById("box").style.maxHeight = "70px";
   }
</script>
</body>
</html>

Sai Subramanyam
Sai Subramanyam

Passionate, Curious and Enthusiastic.

Updated on: 23-Jun-2020

481 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements