如何使div像
好的。我想创建 div 其中：
1. 与文字一样大
2.但它有它的最小尺寸和最大尺寸
并告诉我为什么这一行CSS使我的高度为最大高度而不是文本大小或最小高度？
div#me{max-height:40%;min-height:20%;background-color:silver;}
完整代码：
<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>
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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
给你：
http://jsfiddle.net/bgtJk/2/
您遇到的问题是
html div的规则适用于两个div。因此，内部
div被告知具有height: 100%；不是你想要的，也是你问题的原因。为了解决这个问题，我在外部 div 上指定了一个
id。现在，
#mediv的高度将根据内容而变化 - 从min-height:20%到max-height :40%，以及介于两者之间的任何位置，具体取决于文本高度。如果文字太高，就会溢出，而不是增加div的高度，像这样。这似乎不是特别理想的行为。你确定你不只是想要这样的吗：
http://jsfiddle.net/bgtJk/4/
文本将决定
div。还是像这样？
http://jsfiddle.net/bgtJk/5/
div将至少20%高，但可以根据需要长到任意高度。Here you go:
http://jsfiddle.net/bgtJk/2/
The issue you had was that the rules for
html divwere being applied to bothdivs.So, the inner
divwas being told to haveheight: 100%; not what you wanted, and the cause of your problem.To fix it, I specified an
idon the outer div.Now, the
#medivwill vary in height depending on the content - frommin-height:20%tomax-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 thediv, 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
divwill be at least20%high, but can grow as tall as needed.