Javascript Reference - HTML DOM Style minHeight Property

The min-height property in CSS controls min height for block-level elements or elements with absolute or fixed position.

The minHeight property sets or returns the minimum height of an element.

Browser Support


`minHeight`	Yes	Yes	Yes	Yes	Yes

Syntax

Return the minHeight property:

var v = object.style.minHeight

Set the minHeight property:

object.style.minHeight='length|%|initial|inherit'

Property Values

Value	Description
length	Default to 0. Set the minimum height in length units.
%	Set the minimum height in percent of the container element
initial	Sets to default value.
inherit	Inherits from parent element.

Technical Details

Default Value:	0
Return Value:	A string representing the minimum height
CSS Version	CSS2

Example

The following code shows how to set the minimum height.


<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {<!-- w  w w .  j av  a  2 s  .  c  o m-->
    width: 200px;
    background-color: red;
    overflow: auto;
}
</style>
</head>
<body>
<button onclick="myFunction()">test</button>

<div id="myDIV">
  <p>test<br/>test<br/>test<br/>test<br/>test<br/>
  test<br/>test<br/>test<br/>test<br/>test<br/>
  test<br/>test<br/>test<br/>test<br/>test<br/></p>
</div>
<script>
function myFunction() {
    document.getElementById("myDIV").style.minHeight = "400px";
}
</script>
</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to get the minimum height.


<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="myFunction()">test</button>
<div style="background:red;min-height:150px;" id="myDiv">
  <p>test<br/>test<br/>test<br/>test<br/>test<br/>
  test<br/>test<br/>test<br/>test<br/>test<br/>
  test<br/>test<br/>test<br/>test<br/>test<br/></p>
</div><!--   w w  w  .  j  a  v a 2s. co  m-->
<script>
function myFunction() {
    console.log(document.getElementById("myDiv").style.minHeight);
}
</script>

</body>
</html>

The code above is rendered as follows: