impostazione height/width di un div al 100% della finestra

**blekm** · 25-02-2008, 16:53

stavo tirando giù un idea di layout, e ho visto che impostando

width: 100% funziona perfettamente,

mentre

height: 100% non funziona alla stessa maniera, ma si adatta al 100% a seconda di quanto contenuto vi è dentro quel div...

esiste una maniera di impostare height: 100% per un div (vuoto)? Da usare solo tipo barra verticale che taglia la finestra...

**Mich_** · 25-02-2008, 17:44

Anzitutto la percentuale si riferisce alle dimensioni del contenitore, per cui per definire un blocco height: 100% occorre che il blocco che lo contiene abbia height definito. Se anche questo e` definito in %, la cosa e` ricorsiva fino al <body> e <html> (che dovrebbero essere due oggetti distinti, ma dipende dal browser).

Comunque e` vero: il comportamento di width e height non e` perfettamente simmetrico, anche se nel caso da te descritto non dovesti avere quei problemi.

Posta il codice HTML e CSS da te usato: magari qualcuno trova la soluzione. E posta anche il DOCTYPE e i browser in cui hai testato.

**blekm** · 25-02-2008, 17:52

http://blekm.altervista.org/layout.html

esempio.

.superiore ha impostato width: 100%, e funziona a dovere.

Ho provato per caso ad impostare al div contenitore height: 100%, e non funziona come il width per il .superiore..

la mia, più che altro, era una domanda teorica.

FF su Win Xp

**Mich_** · 25-02-2008, 18:06

Non capisco cosa c'entra lapagina al link postato con la domanda.

E in quella pagina manca:

codice:

html {
  height: 100%;
}

Senza il quale il 100% settato nel body non ha significato (ma dipende dai browser - in IE body e html sono coincidenti)

**blekm** · 26-02-2008, 10:19

http://blekm.altervista.org/layout.html

forse adesso è più chiaro l'esempio.

1) perchè la barra rossa mi crea un effetto di scrolling? Non dovrebbe essere al 100% della finestra?

2) come posizionare il box grigio SOPRA la barra rossa? Ho provato con position:relative ai due box e due valori diversi di z-index, però quando restringo la finestra il blocco rosso mi rimane "fisso", non si sposta...

**Mich_** · 26-02-2008, 11:25

OK, adesso e` piu` chiaro.

Il blocco "laterale" (rosso) e` alto il 100% del body, che a sua volta e` alto come la finestra. In piu` il blocco ha un bordo di 4px totali (2 sopra e 2 sotto), il che` porta ad una altezza (fino ad adesso) di 100% + 4px.
Pero` il blocco stesso e` posizionato DOPO il "superiore", con un margine negativo di 100px (vuol dire che si sovrappone al superiore).
Il blocco "superiore" e` alto 155px (compreso il bordo), il che fa iniziare il blocco "laterale" ad un top "effettivo" di 55px.
Quindi l'altezza totale diventa:
100% (della finestra) + 59px
Che chiaramente e` maggiore di 100%.

Per rispondere alla seconda domanda, occorre notare che il "laterale" ha il float, mentre gli altri blocchi no. Per questo il "contenitore" non tiene conto, nel suo posizionamento, del "laterale", e si posiziona subito sotto il "superiore". Tale blocco e` centrato (tranne nei browser IE 5.5 e precedenti).
La sua altezza totale e` 510px, e viene posizionato in modo da sovrapporsi per 60px al blocco "superiore" (a causa del margin-top negativo)

Per sovrapporre i blocchi, non puoi usare i float (mi pare): devono essere tutti posizionati in modo assoluto o relativo; a quel punto puoi usare lo z-index; in mancanza lo z-index presunto e` l'ordine di comparsa dei blocchi nel codice HTML.
Pero` una prova assegnando opportunamente lo z-index puoi farla anche prima di togliere il float dal "laterale".

Se vuoi usare i posizionamenti, ti consiglio la lettura dei due articoli:
I posizionamenti assoluti
Capire i posizionamenti relativi

**blekm** · 26-02-2008, 11:41

Originariamente inviato da Mich_
Il blocco "laterale" (rosso) e` alto il 100% del body, che a sua volta e` alto come la finestra. In piu` il blocco ha un bordo di 4px totali (2 sopra e 2 sotto), il che` porta ad una altezza (fino ad adesso) di 100% + 4px.
Pero` il blocco stesso e` posizionato DOPO il "superiore", con un margine negativo di 100px (vuol dire che si sovrappone al superiore).
Il blocco "superiore" e` alto 155px (compreso il bordo), il che fa iniziare il blocco "laterale" ad un top "effettivo" di 55px.
Quindi l'altezza totale diventa:
100% (della finestra) + 59px
Che chiaramente e` maggiore di 100%.

ho capito questo.. però, se io tolgo il superiore (la barra orizzontale blu) la barra verticale rossa non mi arriva comunque al 100%

http://blekm.altervista.org/layout.html

Originariamente inviato da Mich_
Per rispondere alla seconda domanda, occorre notare che il "laterale" ha il float, mentre gli altri blocchi no. Per questo il "contenitore" non tiene conto, nel suo posizionamento, del "laterale", e si posiziona subito sotto il "superiore". Tale blocco e` centrato (tranne nei browser IE 5.5 e precedenti).
La sua altezza totale e` 510px, e viene posizionato in modo da sovrapporsi per 60px al blocco "superiore" (a causa del margin-top negativo)

Per sovrapporre i blocchi, non puoi usare i float (mi pare): devono essere tutti posizionati in modo assoluto o relativo; a quel punto puoi usare lo z-index; in mancanza lo z-index presunto e` l'ordine di comparsa dei blocchi nel codice HTML.
Pero` una prova assegnando opportunamente lo z-index puoi farla anche prima di togliere il float dal "laterale".

Se vuoi usare i posizionamenti, ti consiglio la lettura dei due articoli:
I posizionamenti assoluti
Capire i posizionamenti relativi

leggerò questo due guide, grazie. Devo usare i posizionamenti se voglio "sovrapporre i div", giusto?

**Mich_** · 26-02-2008, 12:04

Originariamente inviato da blekm
ho capito questo.. però, se io tolgo il superiore (la barra orizzontale blu) la barra verticale rossa non mi arriva comunque al 100%

In realta` la tua pagina ora inizia 60px sopra il top (cosa che non puoi visualizzare), il float credo parta da quella posizione.
In linea di massima sono da evitare mescolanze di posizionamenti vari, salvo che non si sappia con esattezza cosa si sta facendo.
Se vuoi fare altre prove in questa direzione, fatti uno sfondo a blocchi alternati, ad esempio un oggetto grafico di 1 x 400 px, in cui i primi 200px di un color e gli altri di un altro: cosi` puoi verificare dove inizia e dove finisce il blocco (ma vedi tu se queste sono le dimensioni piu` utili); volendo puoi giocare anche in orizzontale, ed usare il background-position per capire i dettagli fini.

Devo usare i posizionamenti se voglio "sovrapporre i div", giusto?

Credo di si`, ma fai ancora alcune prove, come dicevo prima.

**blekm** · 26-02-2008, 12:10

Originariamente inviato da Mich_
In realta` la tua pagina ora inizia 60px sopra il top (cosa che non puoi visualizzare), il float credo parta da quella posizione.
In linea di massima sono da evitare mescolanze di posizionamenti vari, salvo che non si sappia con esattezza cosa si sta facendo.
Se vuoi fare altre prove in questa direzione, fatti uno sfondo a blocchi alternati, ad esempio un oggetto grafico di 1 x 400 px, in cui i primi 200px di un color e gli altri di un altro: cosi` puoi verificare dove inizia e dove finisce il blocco (ma vedi tu se queste sono le dimensioni piu` utili); volendo puoi giocare anche in orizzontale, ed usare il background-position per capire i dettagli fini.

Credo di si`, ma fai ancora alcune prove, come dicevo prima.

hai ragione, avevo dimenticato il margin-top: -60

ora sembra estendersi su tutta la pagina correttamente.

Farò qualche prova, anche se non penso di aver capito quali e come fare tutte le prove..

**Mich_** · 26-02-2008, 12:14

Una prova e`:
parti dalla versione precedente (quella con il float), e attribuisci solo z-index a tutti i blocchi

Un'altra prova e`:
parti dalla versione ultima (quella con il margine -60 del "superiore") e cambia lo sfondo, usando un'immagine come dicevo poco fa: questo ti permette di veder dove iniziano i blocchi, anche se sono fuori dalla parte visibile.

Discussione: impostazione height/width di un div al 100% della finestra

Strumenti discussione

Ricerca discussione

Visualizza

impostazione height/width di un div al 100% della finestra

Permessi di invio