how to make div like_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-18 04:52 出处：网络

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 minima

相关专题：css firefox3.6

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%;ma开发者_运维知识库rgin-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.