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


Use the minHeight property in JavaScript to set the maximum height. You can try to run the following code to set the minimum 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 Minimum height.</p>
      <button type="button" onclick="display()">Min 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.minHeight = "400px";
         }
      </script>
   </body>
</html>

Updated on: 23-Jun-2020

437 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements