max-height

Overview

W3C

Properties

background

background-attachment

The max-height property constrains the height of an element to a maximum range.

CSS2


                                max-height: <length> | <percentage> | none | inherit

Initial:	none
Applies To:	all elements but non-replaced inline elements, table columns, and column groups
Inherited:	no
Percentages:	refer to height of containing block
Media:	visual

Note: Doctype is required for Internet Explorer 8+

Values
DOM
Example | Values | length
Example | Values | none
Example | Values | percentage
Example | DOM
Reference


                                max-height: value;


Value:	Description:
inherit	Takes the same computed value as the property for the element's parent
length	Fixed maximum height
none	No height limit
percentage	Height percentage calculated with respect to the height of the containing block


                                [window.]document.getElementById("element-id").style.maxHeight = "max-height";

<!doctype html>
<html>
  <head>
    <title>max-height</title>
  </head>
  <body>
    <a href="/" onmouseover="mouseover1();">length</a>
    <a href="/" onmouseover="mouseover2();">percentage</a>
    <a href="/" onmouseover="mouseover3();">none</a><br>
    <img alt="Happy Face" id="id1" src="/assets/jpg/HappyFace.jpg">
    <img alt="Happy Face" id="id2" src="/assets/jpg/HappyFace.jpg">
    <img alt="Happy Face" id="id3" src="/assets/jpg/HappyFace.jpg">
  </body>
  <script type="text/javascript">
    function mouseover1() {
      document.getElementById("id1").style.maxHeight = "120px";
      document.getElementById("id2").style.maxHeight = "120px";
      document.getElementById("id3").style.maxHeight = "120px";
    }
    function mouseover2() {
      document.getElementById("id1").style.maxHeight = "25%";
      document.getElementById("id2").style.maxHeight = "25%";
      document.getElementById("id3").style.maxHeight = "25%";
    }
    function mouseover3() {
      document.getElementById("id1").style.maxHeight = "none";
      document.getElementById("id2").style.maxHeight = "none";
      document.getElementById("id3").style.maxHeight = "none";
    }
    document.getElementById("id1").style.height = "60px";
    document.getElementById("id2").style.height = "120px";
    document.getElementById("id3").style.height = "240px";
  </script>
</html>

W3C Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification

CSS

Values

DOM

Example | Values | length

Example | Values | none

Example | Values | percentage

Example | DOM

Reference