CSS: perché l’altezza percentuale non funziona?

Come mai un valore percentuale per l’ height non funziona, ma un valore percentuale per la width fa?

Ad esempio :

 
 #working{ width:80%; height:140px; background:orange; } #not-working{ width:80%; height:30%; background:green; } 

La larghezza di #working finisce per essere l’80% del viewport, ma l’altezza di #not-working finisce con 0.

    L’altezza di un elemento di blocco è impostata automaticamente sull’altezza del contenuto del blocco. Quindi, dato qualcosa di simile:

     

    Where is pancakes house?

    #inner diventerà abbastanza alto da contenere il paragrafo e #outer diventerà abbastanza alto da contenere #inner .

    Quando specifichi l’altezza o la larghezza come percentuale, questa è una percentuale rispetto al genitore dell’elemento. Nel caso della larghezza, tutti gli elementi del blocco sono, se non diversamente specificato, ampi quanto il loro genitore fino a ; quindi, la larghezza di un elemento di blocco è indipendente dal suo contenuto e dice width: 50% produce un numero ben definito di pixel.

    Tuttavia, l’altezza di un elemento di blocco dipende dal suo contenuto, a meno che non si specifichi un’altezza specifica. Quindi c’è un feedback tra il genitore e il bambino in cui si parla di altezza e si dice height: 50% non produce un valore ben definito a meno che non si interrompa il ciclo di feedback dando all’elemento genitore un’altezza specifica.

    Un valore percentuale in una proprietà height ha una piccola complicazione e le proprietà width e height comportano in modo diverso l’una dall’altra. Lascia che ti accompagni in un tour attraverso le specifiche.

    height proprietà:

    Diamo un’occhiata a ciò che le specifiche CSS Snapshot 2010 dicono height :

    La percentuale viene calcasting rispetto all’altezza del blocco contenitore della casella generata. Se l’altezza del blocco contenitore non è specificata esplicitamente (cioè dipende dall’altezza del contenuto), e questo elemento non è posizionato in modo assoluto, il valore calcola su ‘auto’. Un’altezza percentuale sull’elemento radice è relativa al blocco contenitore iniziale . Nota: per gli elementi posizionati in modo assoluto il cui blocco contenitore è basato su un elemento a livello di blocco, la percentuale viene calcasting rispetto all’altezza del riquadro di riempimento di quell’elemento.

    OK, facciamo questo passo dopo passo:

    La percentuale viene calcasting rispetto all’altezza del blocco contenitore della casella generata.

    Cos’è un blocco contenitore ? È un po ‘complicato, ma per un elemento normale nella posizione static default, è:

    la casella dell’antenato del contenitore del blocco più vicino

    o in inglese, la sua casella genitore. (Vale la pena sapere cosa sarebbe per fixed posizioni fixed e absolute pure, ma sto ignorando che per mantenere questa risposta breve.)

    Quindi prendi questi due esempi:

     

    Penso che devi solo dargli un contenitore genitore … anche se l’altezza del contenitore è definita in percentuale. Questo funziona bene: JSFiddle

     html, body { margin: 0; padding: 0; width: 100%; height: 100%; } .wrapper { width: 100%; height: 100%; } .container { width: 100%; height: 50%; } 

    Devi dargli un contenitore con un’altezza. width usa il viewport come larghezza predefinita

    Un’altra opzione è aggiungere lo stile al div

     
    //to be scrolled

    E significa che un elemento è posizionato rispetto all’antenato posizionato più vicino.

    Senza contenuto, l’altezza non ha valore per calcolare la percentuale di. La larghezza, tuttavia, prenderà la percentuale dal DOM, se non viene specificato alcun genitore. (Usando il tuo esempio) Posizionando il secondo div all’interno del primo div, avresti reso un risultato … esempio sotto …

     

    Il secondo div sarebbe il 30% dell’altezza del primo div.