Con il layout a blocchi, è spesso richiesto rendere l'altezza del blocco div 100%... Indicazione semplice altezza = 100% v div non sarà possibile ottenere il risultato desiderato, quindi esiste una certa tecnica, di cui parlerò in questo articolo.

Prima di dare il codice, ti spiego come funziona. La sua essenza è indicare altezza = 100% per tutti i blocchi principali, compreso, e html... Ad esempio, questo codice ti consente di fare div con altezza 100%:

Di conseguenza, entrambi le div saranno alte al 100%... Si prega di notare che se si rimuove da altezza html 100%, allora non ne verrà fuori nulla. Allo stesso modo, se il top div mettere via altezza 100%, e lascia l'interiore, allora l'interiore non sarà con 100% altezza. Cioè, ricordati di crea un div con altezza 100%, anche ogni blocco genitore deve essere realizzato con altezza 100%.

Se hai ancora domande o desideri commentare questo articolo, puoi lasciare il tuo commento in fondo alla pagina.

Commenti (6):

03.05.2013 20:37:02

Michael, hai fatto come te, ma allungando il blocco centrale, il blocco destro non aumenta

Risposta

03.05.2013 21:55:51

Maha'il! Ho provato il metodo proposto: funziona, ma con l'avvertenza che i blocchi div a cui è impostata l'altezza al 100% non devono essere più grandi della finestra del browser. Se il blocco non rientra in altezza nella finestra del browser, il blocco non sarà completamente colorato con il colore di sfondo. Solo la parte del blocco che si adatta alla finestra del browser verrà colorata con un colore di sfondo. Ecco il codice per un esempio.

stile di testo css (4)

Senza contenuto, l'altezza non ha importanza per il calcolo della percentuale. Tuttavia, la larghezza richiederà una percentuale del DOM se non viene specificato nessuno dei genitori. (Usando il tuo esempio) Posizionando il secondo div all'interno del primo div otterresti il ​​risultato ... esempio sotto ...

La seconda div sarà il 30% dell'altezza della prima div.

Perché non funziona la percentuale per l'altezza ma la percentuale per la larghezza?

La #larghezza di lavoro è l'80% della finestra, ma l'altezza # di non lavoro termina a 0.

Devi dargli un contenitore con un'altezza. larghezza usa la finestra come larghezza predefinita

Un'altra opzione è aggiungere stile al div

E questo significa che l'elemento si trova rispetto all'antenato più vicino.

La percentuale nella proprietà altezza presenta una leggera complicazione e le proprietà larghezza e altezza si comportano effettivamente in modo diverso l'una dall'altra. Lascia che ti accompagni in un tour delle specifiche.

altezza:

contenente generato bloccare... Se l'altezza del blocco contenitore non è specificata esplicitamente (cioè dipende dall'altezza del contenuto) e l'elemento non è posizionato in modo assoluto, il valore viene valutato su "auto". Altezza percentuale all'elemento radice rispetto a blocco contenente iniziale... Nota. Per gli elementi posizionati in modo assoluto, contenenti un blocco basato su un elemento a livello di blocco, la percentuale viene calcolata rispetto all'altezza del riquadro di riempimento di quell'elemento.

Ok, procediamo passo dopo passo:

La percentuale viene calcolata rispetto all'altezza del blocco, contenente generato bloccare .

La percentuale viene calcolata in base alla larghezza del blocco generato.

Dai un'occhiata a questi esempi familiari, modificati dal precedente per cambiare la larghezza anziché l'altezza:

• 50% di larghezza: 200 px 200 px - 100 px in caso di #cc
• 50% larghezza: auto è il 50% di qualsiasi larghezza: auto termina, a differenza dell'altezza, non esiste una regola speciale che gestisca questo caso in modo diverso.

Ora ecco il punto difficile: auto significa cose diverse a seconda che sia stato specificato per la larghezza o l'altezza! Per altezza significa solo l'altezza necessaria per adattarsi al contenuto *, ma per larghezza auto è in realtà più complicato. Puoi vedere dallo snippet di codice, che in questo caso si è rivelato essere la larghezza del viewport.

La larghezza dipende dai valori di altre proprietà. Vedere le sezioni di seguito.

Aspetta, questo non è utile. Per risparmiarti la fatica, ti ho trovato una sezione pertinente nel nostro caso d'uso intitolata Calcolo di larghezze e margini, sottotitolata "elementi immutabili a livello di blocco nel flusso normale":

I valori di altre proprietà utilizzate dovrebbero includere le seguenti restrizioni:

"margin-left" + "border-left-width" + "padding-left" + "width" + "padding-right" + "border-right-width" + "margin-right" = larghezza del blocco contenitore

OK, quindi la larghezza più i bordi, i bordi e i margini di riempimento corrispondenti dovrebbero sommarsi alla larghezza del blocco contenitore (un non discendenti, come funziona l'altezza). Un altro suggerimento:

Se "width" è impostato su "auto", qualsiasi altro valore "auto" diventa "0" e "width" segue dall'uguaglianza risultante.

Ah! Quindi, in questo caso, 50% di larghezza: auto è il 50% della finestra. Spero che tutto abbia finalmente un senso ora!

* Almeno quanto è importante in questo caso. spec Ok, ora tutto ha un senso.

Descrizione

Imposta l'altezza massima di un elemento. Il valore dell'altezza dell'elemento verrà calcolato in base ai valori delle proprietà impostate altezza, altezza massima e altezza minima. Tavolo La Figura 1 mostra come viene guidato il browser quando si utilizzano insieme le proprietà di stile specificate.

I dati della tabella devono essere intesi come segue. Se il valore dell'altezza è maggiore del valore dell'altezza massima, si presume che l'altezza dell'elemento sia uguale al valore dell'altezza massima.

Sintassi

altezza massima: valore | interesse | nessuno | ereditare

I valori

Pixel (px), percentuali (%) e altre unità di misura accettate nei CSS sono accettati come valori. Non sono ammessi valori negativi.

Nessuno Annulla questa proprietà. inherit Eredita il valore dal genitore.

HTML5 CSS2.1 IE Cr Op Sa Fx

Il risultato di questo esempio è mostrato in Fig. uno.

Riso. 1. Risultato dell'utilizzo della proprietà altezza massima

Modello oggetto

document.getElementById ("elementID") .style.maxHeight

Browser

Internet Explorer fino alla versione 7.0 inclusa non supporta il valore ereditato.