Как сделать div как

StackOverflow https://stackoverflow.com/questions/5371623

  •  27-10-2019
  •  | 
  •  

Вопрос

Ok. Я хочу создать 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>
Это было полезно?

Решение

Ну вот:

http://jsfiddle.net/bgtjk/2/

Проблема, которая у вас была html div применялись к оба divс.

Итак, внутренний div было сказано height: 100%; Не то, что вы хотели, и причина вашей проблемы.

Чтобы исправить это, я указал id На внешнем див.

Сейчас #me div будет варьироваться по высоте в зависимости от содержания - от min-height:20% к max-height:40%, и где угодно между ними в зависимости от высоты текста. Если текст слишком высокий, он пролится, вместо увеличения высоты div, как это. Анкет Это не особенно желательно поведение.

Вы уверены, что не просто хотите этого так:
http://jsfiddle.net/bgtjk/4/

Текст будет определять высоту div.

Или как это?
http://jsfiddle.net/bgtjk/5/

А div будет хотя бы 20% Высокий, но может расти столь высокой, как это необходимо.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top