UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.
The min-height property in CSS is used to set the minimum height of a specified element. The min-height property always overrides both height and max-height. Authors may use any of the length values as long as they are a positive value.
.wrapper {
height: 100%; /* full height of the content box */
min-height: 20em; /* Will be AT LEAST 20em tall */
}
.wrapper {
height: 600px;
min-height: 400px; /* Will be AT LEAST 400px tall : overrides height */
}
.wrapper {
min-height: 400px; /* overrides height and max-height */
height: 200px;
max-height: 300px;
}If either value is greater (height > min-height or vice-versa), the value that is greatest will be the one rendered. The min-height property will apply to all elements except non-replaced inline elements, table columns, and column groups (i.e. colgroup, col ).
Browser support
| IE | Edge | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| All | All | All | All | All | All |
| Android Chrome | Android Firefox | Android Browser | iOS Safari | Opera Mobile |
|---|---|---|---|---|
| All | All | All | All | 59+ |
I think the browser support table is inaccurate… For example Firefox 2+ supports min-height, according to http://caniuse.com/#feat=minmaxwh
Hi Chris,
I have been developing sites for many years and consider you a reputable source when developing, well done.
Just a quick note about this, not sure how “compatible” this technique is as height is what sets the boxes’ height where as min-height is the secondary property.
To my knowledge if min-height is greater than height than the container would “overflow” beyond its contents and may cause some inconsistency across the browsers.
Am I missing something or over thinking?
Looking forward to your reply,
Mr Alexander
While it appears to be five years old, I am altogether glad and thankful for finding this CSS trick since it addressed and corrected a problem I was having with one of my html website pages whereby one of my pages was failing to display text in scrolling down to the bottom of one of my pages when using Firefox or MS edge but not in Google Chrome. Interestingly enough, I was experiencing similar behavior in the early ongoing with one or more other Hhtml pages whereby I was able to rectify the issue through trial and error by modifying the padding and margin attribute values in my external CSS. However, this eventually became a real pita in that modifying the values ended up working for one but not both pages whereby I was eventually forced to use inline CSS in the remaining html page to override that provided in the external CSS. Then, wouldn’t you know it, another one of my website pages began acting up exhibiting similar behavior when viewed in FF and MS edge. I then added the min-height attribute as described herein to a section in my external CSS and, voila, this resolved the problem once and for all.
Great article,
I just wanted to check if you have you ever experienced an issue with using “vh” as your min-height value. I had an attribute set to “min-height: 100vh” and it was ignoring the min-height attribute, but if I use a pixel value it works.
I ended up using display: flex and it seemed to have worked, do you have any experience with this?
Luke
Hey Sara,
in your first code example you have:
.wrapper {height: 600px;
min-height: 400px; /* Will be AT LEAST 20em tall : overrides height */
}
What is the benefit for height and min-height specified in px? And why does the comment behind min-height says something about em?
Hey David! There’s no additional benefit when the values are specified in pixels — just one example in the set to show that different length units are accepted. If the design calls for a fixed height between 400px and 600px, then that would be a good case for using them. But you’ll likely see relative or percentage units for their flexibility in responsive designs (among other things).
Oh, and thanks for the heads up on that typo in the code comment!