max-height

max-height

CSS max-height Property

The CSS max-height property is used to set the maximum height that an element can grow to be. Use with min-height to create a height range for the element. Use in conjuction with the overflow property to show scrollbars or hide content that might go beyond the max-height of the element.
The example below creates a height range in which the element cannot be less than 90px high, and cannot be more than 200px high.

CSS CODE EXAMPLE

<!DOCTYPE html>
<style type="text/css">
#myDiv {
    max-height: 200px;
    min-height: 90px;
    background: #FFCAFF;
    overflow:auto;
}
</style>
<div id="myDiv">
  <p>paragraph content ...</p>
</div>

paragraph content ...

Now add more content to the element and you will see the effects of max-height.

CSS CODE EXAMPLE

<!DOCTYPE html>
<style type="text/css">
#myDiv {
    max-height: 200px;
    min-height: 90px;
    background: #FFCAFF;
    overflow:auto;
}
</style>
<div id="myDiv">
  <p>paragraph content ...</p>
  <p>paragraph content ...</p>
  <p>paragraph content ...</p>
  <p>paragraph content ...</p>
  <p>paragraph content ...</p>
  <p>paragraph content ...</p>
  <p>paragraph content ...</p>
  <p>paragraph content ...</p>
  <p>paragraph content ...</p>
</div>

paragraph content ...
paragraph content ...
paragraph content ...
paragraph content ...
paragraph content ...
paragraph content ...
paragraph content ...
paragraph content ...
paragraph content ...

Possible Values:

number
Example: "200px"
percentage
Example: "25%"
none
Example: "none" (specify that no height minimum be applied)

click here to code.

max-height

Possible Values:

0 Response to "max-height"

Post a Comment