- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Selectors
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Border Block
- CSS - Border Inline
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursor
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS - Inline Block
- CSS - Dropdowns
- CSS - Visibility
- CSS - Overflow
- CSS - Clearfix
- CSS - Float
- CSS - Arrows
- CSS - Resize
- CSS - Quotes
- CSS - Order
- CSS - Position
- CSS - Hyphens
- CSS - Hover
- CSS - Display
- CSS - Focus
- CSS - Zoom
- CSS - Translate
- CSS - Height
- CSS - Hyphenate Character
- CSS - Width
- CSS - Opacity
- CSS - Z-Index
- CSS - Bottom
- CSS - Navbar
- CSS - Overlay
- CSS - Forms
- CSS - Align
- CSS - Icons
- CSS - Image Gallery
- CSS - Comments
- CSS - Loaders
- CSS - Attr Selectors
- CSS - Combinators
- CSS - Root
- CSS - Box Model
- CSS - Counters
- CSS - Clip
- CSS - Writing Mode
- CSS - Unicode-bidi
- CSS - min-content
- CSS - All
- CSS - Inset
- CSS - Isolation
- CSS - Overscroll
- CSS - Justify Items
- CSS - Justify Self
- CSS - Tab Size
- CSS - Pointer Events
- CSS - Place Content
- CSS - Place Items
- CSS - Place Self
- CSS - Max Block Size
- CSS - Min Block Size
- CSS - Mix Blend Mode
- CSS - Max Inline Size
- CSS - Min Inline Size
- CSS - Offset
- CSS - Accent Color
- CSS - User Select
- CSS Advanced
- CSS - Grid
- CSS - Grid Layout
- CSS - Flexbox
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Paged Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS - Image Sprites
- CSS - Important
- CSS - Data Types
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS - Rounded Corner
- CSS - Border Images
- CSS - Multi Background
- CSS - Color
- CSS - Gradients
- CSS - Box Shadow
- CSS - Box Decoration Break
- CSS - Caret Color
- CSS - Text Shadow
- CSS - Text
- CSS - 2d transform
- CSS - 3d transform
- CSS - Transition
- CSS - Animation
- CSS - Multi columns
- CSS - Box Sizing
- CSS - Tooltips
- CSS - Buttons
- CSS - Pagination
- CSS - Variables
- CSS - Media Queries
- CSS - Functions
- CSS - Math Functions
- CSS - Masking
- CSS - Shapes
- CSS - Style Images
- CSS - Specificity
- CSS - Custom Properties
- CSS Responsive
- CSS RWD - Introduction
- CSS RWD - Viewport
- CSS RWD - Grid View
- CSS RWD - Media Queries
- CSS RWD - Images
- CSS RWD - Videos
- CSS RWD - Frameworks
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
CSS - max-height Property
The max-height property is used to set an upper bound on the height of an element.
Possible Values
none − There is no limit to the height of the element.
<length> − Any length unit. The element can never have a value for height which exceeds this distance.
<percentage> − Limits the element's height to be at most this percentage of the height of the containing block.
initial − Sets the value of max-height to its default value.
inherit − The value of max-height is inherited from its parent value.
Applies to
All the HTML elements except non-replaced inline elements and table elements.
DOM Syntax
object.style.maxHeight = "50px"
CSS max-height - <length> value
The following example demonstrates max-height: 40px property sets the maximum height of an element to 40px −
<html> <head> <style> p { width:400px; max-height:40px; border:2px solid red; padding:5px; margin:10px; } </style> </head> <body> <p> This paragraph is 400px wide and maximum height is 40px. Hence the border is not covering the entire text and there is some part of text outside the border. This is due to the max-height value set for p tag. </p> </body> </html>
CSS max-height - <percentage> value
Here is another example demonstrating use of all values in max-height −
<html> <head> <style> div.a { max-height: 100px; width: 80%; overflow: auto; } div.b { max-height: 70%; width: 80%; overflow: auto; } div.c { max-height: inherit; width: 80%; overflow: auto; } div.d { max-height: none; width: 80%; overflow: auto; } </style> </head> <body> <div class="a"> <h2>max-height: 100px and width:80%</h2> <p class="a"><p>The <i>max-height</i> property allows you to specify maximum height of a box. The value of the max-height property can be various, but this one is 100px.</p> </div> <div class="b"> <h2>max-height: 70% and width:80%</h2> <p class="a"><p>The <i>max-height</i> property allows you to specify maximum height of a box. The value of the max-height property can be various, but this one is 70%.</p> </div> <div class="c"> <h2>max-height: inherit and width:80%</h2> <p class="a"><p>The <i>max-height</i> property allows you to specify maximum height of a box. The value of the max-height property can be various, but this one is inherit.</p> </div> <div class="d"> <h2>max-height: none and width:80%</h2> <p class="a"><p>The <i>max-height</i> property allows you to specify maximum height of a box. The value of the max-height property can be various, but this one is none.</p> </div> </body> </html>
Advertisements