...

View Full Version : Someone explain min-height and max-height



mobotech
12-18-2009, 03:48 AM
I've tried to use max-height on a paragraph element, but I didn't see any effect of it.

Can someone tell me what max-height does and the why one should use max-height instead of just height?

Examples would be great.

vineet
12-18-2009, 04:26 AM
if you specifiy

max:height:2000px

but if your content height is more than 2000px then also your content height will still be 2000px. rest of the content above 2000px will not get cut.

vineet

Excavator
12-18-2009, 04:50 AM
Hello mobotech,
max-height (http://www.w3schools.com/Css/pr_dim_max-height.asp) sets the maximum height of an element. It can grow up to the height you set but not larger.

abduraooft
12-18-2009, 09:41 AM
Can someone tell me what max-height does and the why one should use max-height instead of just height?
Check the output of
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Box</title>
<style type="text/css">
.div1{
min-height:100px;
border:1px solid red;
}
.div2{
margin-top:20px;
max-height:100px;
border:1px solid black;
}
</style>


</head>

<body>


<div class="outer">
<div class="div1">
This div has min-height set, so it takes that much height even if the content is too short. It'll automatically fit to the content, if the content size is large.
</div>

<div class="div2">
This div has max-height set, so it can't expan beyond that height(the content overflows beyond that limit). If the content is very short,
then it takes the height which is required to hold the content. <br> <br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ornare pellentesque porttitor. Morbi ullamcorper hendrerit dolor. In hac habitasse platea dictumst. Proin vulputate, lectus vel rhoncus tincidunt, neque sem mollis augue, in lobortis neque libero in nunc. Suspendisse laoreet ullamcorper diam at eleifend. Nam ante arcu, elementum nec sagittis et, aliquam vel nibh. Proin malesuada porta scelerisque. Vivamus auctor, nisi vitae pharetra tincidunt, mauris turpis convallis velit, malesuada bibendum ipsum ipsum in nulla. Nullam viverra, lectus ut iaculis ullamcorper, ipsum tellus eleifend nisi, condimentum fringilla erat purus ut nisi. Integer eget nunc felis. Praesent id erat a mauris aliquet tristique ornare vitae enim. Nulla mollis aliquam arcu eu facilisis. Nulla nec nulla id augue dignissim pellentesque eget vel odio. Nullam non felis a felis hendrerit tempor. Vivamus sit amet quam varius ante hendrerit vulputate. Sed non nisl libero, ac feugiat arcu. Etiam sem velit, tempor imperdiet aliquam congue, lacinia ac lorem.
</div>
</div>
</body>

</html>

max-height sets the maximum height of an element. It can grow larger but not smaller than what you set it to. Isn't that the description of min-height?

Excavator
12-18-2009, 10:04 AM
Isn't that the description of min-height?

Oops :eek:
I've fixed it.

mobotech
12-19-2009, 03:12 AM
Check the output of
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Box</title>
<style type="text/css">
.div1{
min-height:100px;
border:1px solid red;
}
.div2{
margin-top:20px;
max-height:100px;
border:1px solid black;
}
</style>


</head>

<body>


<div class="outer">
<div class="div1">
This div has min-height set, so it takes that much height even if the content is too short. It'll automatically fit to the content, if the content size is large.
</div>

<div class="div2">
This div has max-height set, so it can't expan beyond that height(the content overflows beyond that limit). If the content is very short,
then it takes the height which is required to hold the content. <br> <br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ornare pellentesque porttitor. Morbi ullamcorper hendrerit dolor. In hac habitasse platea dictumst. Proin vulputate, lectus vel rhoncus tincidunt, neque sem mollis augue, in lobortis neque libero in nunc. Suspendisse laoreet ullamcorper diam at eleifend. Nam ante arcu, elementum nec sagittis et, aliquam vel nibh. Proin malesuada porta scelerisque. Vivamus auctor, nisi vitae pharetra tincidunt, mauris turpis convallis velit, malesuada bibendum ipsum ipsum in nulla. Nullam viverra, lectus ut iaculis ullamcorper, ipsum tellus eleifend nisi, condimentum fringilla erat purus ut nisi. Integer eget nunc felis. Praesent id erat a mauris aliquet tristique ornare vitae enim. Nulla mollis aliquam arcu eu facilisis. Nulla nec nulla id augue dignissim pellentesque eget vel odio. Nullam non felis a felis hendrerit tempor. Vivamus sit amet quam varius ante hendrerit vulputate. Sed non nisl libero, ac feugiat arcu. Etiam sem velit, tempor imperdiet aliquam congue, lacinia ac lorem.
</div>
</div>
</body>

</html>
Isn't that the description of min-height?

That helped, thanks.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum