•  27-10-2019
  •  | 
  •  

سؤال

Ok. I want to create div which:
1. is as big as text is
2. but it has its minimal size and maximal one

And tell my why this line of CSS makes my height as max-height instead of size of text or minimal height ?

div#me{max-height:40%;min-height:20%;background-color:silver;}

full code:

<head>
<meta http-equiv="Content-Language" content="pl" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<html>
<style type="text/css">
html {width:100%;height:100%;}
html div{margin-left:3%;margin-top:1%;width:94%;height:100%;background-color:black;}
div#me{max-height:40%;min-height:20%;background-color:silver;}
</style>

<div>
<div id="me">
TEXT<br/>
TEXT<br/>
</div>



</div>

</html>
هل كانت مفيدة؟

المحلول

Here you go:

http://jsfiddle.net/bgtJk/2/

The issue you had was that the rules for html div were being applied to both divs.

So, the inner div was being told to have height: 100%; not what you wanted, and the cause of your problem.

To fix it, I specified an id on the outer div.

Now, the #me div will vary in height depending on the content - from min-height:20% to max-height:40%, and anywhere in between depending on text height. If the text is too tall, it will spill over, instead of increasing the height of the div, like this. That doesn't seem to be particularly desirable behaviour.

Are you sure you don't just want it like this:
http://jsfiddle.net/bgtJk/4/

The text will determine the height of the div.

Or like this?
http://jsfiddle.net/bgtJk/5/

The div will be at least 20% high, but can grow as tall as needed.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top