Member Avatar for sreein1986

Hi,

Freinds,

I have a doubt in style sheets, when i was using a in table tag there a style property show that is min-height, what is the min-height? and what is difference between hieght and min-height?

Advanced thanx

  • 3 Contributors
  • 2 Replies
  • 118 Views
  • 22 Hours Discussion Span
  • Latest Post Latest Post by JugglerDrummer

Dani AI

Generated

Quick, practical clarification and a few gotchas to watch for.

The browser computes an element height and then applies constraints from min-height and max-height. That means if your declared height is smaller than min-height, the element will end up at the minimum. For the official behavior and edge rules see min-height on MDN and height on MDN.

Percent values for min-height are resolved against the containing block’s height — but only when that height is definite. Example:

.parent { height: 600px; }
.child  { min-height: 30%; } /* at least 180px because parent has a fixed height */

If the parent’s height is auto, the percentage typically won’t produce the expected minimum.

A common real-world pitfall with modern layout systems: flex and grid items. They often have a default minimum size that prevents children from shrinking to zero, which can block scrollable children. If a flex child refuses to shrink, explicitly reset its minimum so it can overflow/scroll:

.container { display: flex; height: 400px; }
.child     { min-height: 0; overflow: auto; }

That small change frequently fixes "child won't scroll" issues.

Extra tips: remember box-sizing changes how height counts padding/borders; floated or absolutely positioned children do not expand their parent (use clearfix or overflow:auto on parent); use max-height when you need an upper limit. Building on and : their basics are correct, but the notes above cover the percentage, flexbox, and box-sizing behaviors that often confuse people in practice.

Recommended Answers

All 2 Replies

Member Avatar for Xlphos

Maybe will help.

I believe the difference is; height is the height and min-height is the minimum height of the image.

Lets say we have an image that is 100px high. You could load the image by writing height:50px; This will be 50px high

or you could put min-height:50px; This will be 100px high as the original image is 100px.

All min/max-height does is set the limits to one or more images.

height sets the size of an image.

-Hope this helps

Member Avatar for JugglerDrummer

height sets the actual height of an element. If height is set in an absolute value like pixels then min-height doesn't really matter because the height is always that number. But if you set the height to a relative value, like 20%, then you start to lose control of how big the item actually appears. So min height allows you to specify a minimum height that the object will have, even if the window is resized. It will keep getting smaller as the browser window does, until it hits 200px or whatever value you set for the min height. Width and min-width work the same way. I have only seen it done the way I specified, I don't know if you could set have the height of the item be 200px, but have a minimum height of 20% of the page. If the page was made large enough so the 20% of the containing element was more that 200px, the element would take on a height of 20% of the page. You can be sure the height is AT LEAST the min height. Hope this helps!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.