Come rendere come come Div

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

  •  27-10-2019
  •  | 
  •  

Domanda

Ok. Voglio creare div che:
1. È grande come il testo è
2. ma ha le sue dimensioni minime e una massima

E dirmi perché questa linea di CSS rende la mia altezza come altezza massima anziché dimensioni di testo o altezza minima?

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

Codice 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>
È stato utile?

Soluzione

Ecco qui:

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

Il problema che hai avuto era che le regole per html div sono stati applicati a Entrambi divS.

Quindi, l'interno div è stato detto di averlo fatto height: 100%; Non quello che volevi e la causa del tuo problema.

Per risolverlo, ho specificato un id sul div esterno.

Ora il #me div varierà in altezza a seconda del contenuto - da min-height:20% a max-height:40%, e ovunque tra a seconda dell'altezza del testo. Se il testo è troppo alto, si riverserà, invece di aumentare l'altezza del div, come questo. Questo non sembra essere un comportamento particolarmente desiderabile.

Sei sicuro di non volerlo solo così:
http://jsfiddle.net/bgtjk/4/

Il testo determinerà l'altezza del div.

O come questo?
http://jsfiddle.net/bgtjk/5/

Il div sarà almeno 20% Alto, ma può diventare alto quanto necessario.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top