- 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 - min-height
The min-height property is used to set a lower bound on the height of an element.
Possible Values
length − Any length unit. The element can never have a value for height which is lower than this value. Default value is 0.
percentage − It sets the element's minimum height in the percentage of the height of the containing block.
initial − Sets the value of min-height to its default value.
inherit − The value of min-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.minHeight = "50px"
CSS min-height Example
The following example demonstrates how to use min-height property sets the minimum height of an element −
<html> <head> <style> div.a { border: 2px solid red; min-height: 200px; width: 80%; overflow: auto; margin-bottom:5px; } div.b { border: 2px solid blue; min-height: 40%; overflow: auto; margin-bottom:5px; } div.c { border: 2px solid green; min-height: 20px; overflow: auto; margin-bottom:5px; } </style> </head> <body> <div style="border:2px dashed black; margin-bottom:4px;"> <h2>min-height: 0 (default):</h2> <p>The <i>min-height</i> property in CSS is used to set the minimum height of an element. It specifies the smallest height that an element can have, ensuring that it will never shrink below that value.</p> </div> <div class="a"> <h2>min-height: 200px and width:80%</h2> <p>The <i>min-height</i> property in CSS is used to set the minimum height of an element. It specifies the smallest height that an element can have, ensuring that it will never shrink below that value.</p> </div> <div class="b"> <h2>min-height: 40%</h2> <p>The <i>min-height</i> property in CSS is used to set the minimum height of an element. It specifies the smallest height that an element can have, ensuring that it will never shrink below that value.</p> </div> <div class="c"> <h2>min-height: 20px (smaller than content)</h2> <p>The min-height is smaller than the content, hence the property <i>min-height</i> has no effect. The <i>min-height</i> property in CSS is used to set the minimum height of an element. It specifies the smallest height that an element can have, ensuring that it will never shrink below that value. </p> </div> </body> </html>
Advertisements