•  27-10-2019
  •  | 
  •  

Pregunta

Está bien. Quiero crear divs que:
1. es tan grande como el texto es
2. Pero tiene su tamaño mínimo y su máximo

Y dígale por qué esta línea de CSS hace que mi altura sea máxima de altura en lugar de tamaño de texto o altura mínima.

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

Código completo:

<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>
¿Fue útil?

Solución

Aquí tienes:

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

El problema que tuvo fue que las reglas para html div se aplicaban a ambas cosas divs.

Entonces, el interior div se le dijo que tuviera height: 100%; No es lo que querías y la causa de tu problema.

Para arreglarlo, especifiqué un id En el Diver Div.

Ahora el #me div variará en altura dependiendo del contenido, desde min-height:20% a max-height:40%, y en cualquier lugar dependiendo de la altura del texto. Si el texto es demasiado alto, se derramará, en lugar de aumentar la altura del div, como esto. Ese no parece ser un comportamiento particularmente deseable.

¿Estás seguro de que no solo lo quieres así?
http://jsfiddle.net/bgtjk/4/

El texto determinará la altura del div.

¿O así?
http://jsfiddle.net/bgtjk/5/

los div será al menos 20% alto, pero puede crecer tan alto como sea necesario.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top