2012-04-13 9 views
9

Così, dopo aver letto Stack Overflow e il web, ho capito che ci sono due trucchi principali al raggiungimento di altezza 100%:Regolazione altezza 100% su un elemento posizionato in modo assoluto quando il contenuto si espande oltre la dimensione della finestra

  1. Set altezza: 100% sia sul HTML e BODY
  2. Impostare il vostro elemento di avere uno:
    • altezza: 100%, o
    • top: 0, in basso: 0, position: absolute

Tuttavia, anche con questi trucchi ho difficoltà a impostare l'altezza di un DIV con posizione assoluta su un vero 100%. Posso ottenere il 100% delle dimensioni della finestra, ma se l'utente scorre verso il basso diventa evidente che il div non ha veramente il 100% di altezza.

Ho fatto un semplice JS Fiddle della situazione qui: http://jsfiddle.net/9FEne/

La mia domanda è: qualcuno sa ulteriori trucchi per ottenere un vero e proprio (. Es content-altezza, non viewport-altezza) 100 % altezza posizionata in modo assoluto div?

+2

'posizione: relativa'? 'top: 0; fondo: 0' avrebbe * nessun * effetto su un elemento relativamente posizionato. – animuson

+0

@Interstellar_Coder, no non sarebbe ... :) – Prestaul

+0

Oh, beh forse quell'approccio avrebbe dovuto usare la posizione: assoluto. Conosco questa posizione: l'assoluto non funziona per me, ma ho visto quella parte superiore: 0/bottom: 0 tecnica da qualche parte ... – machineghost

risposta

11

dispiace, ho perso la vera domanda prima e ho pensato che si voleva la finestra riempita. Se il problema è che il contenuto è più lungo della finestra, allora quello che ti serve è aggiungere position:relative al corpo. http://jsfiddle.net/9FEne/7/

Quello che succede è che quando posizioni in modo assoluto posizioni (e dimensioni) rispetto all'elemento posizionato più vicino. Se non si dice di posizionarsi sul corpo, si posizionerà sulla finestra.

+0

Non funziona davvero se non c'è o c'è poco contenuto per riempire l'altezza dello schermo. Si potrebbe anche voler aggiungere 'height: 100%;' su entrambi gli elementi 'body' e' html'. –

6

È possibile utilizzare jQuery per realizzare questo trucco

var h = $(window).height(); 
$('#yourdiv').height(h); 
+1

Questa è una domanda css, non una domanda javascript. – Prestaul

+6

Bene, hai chiesto se ci fossero "ulteriori trucchi". javascript potrebbe dare una soluzione facile a questo problema. –

+0

Dirò la stessa cosa che ho detto a OnResolve: Questo è abbastanza giusto, ma questo non è difficile da risolvere con CSS e l'aggiunta di javascript nel mix introduce altri problemi ... E.g. cosa succede quando l'utente ridimensiona il suo browser? – Prestaul

4

userei javascript per assegnare l'altezza e la larghezza pari all'altezza del documento e la larghezza della finestra, rispettivamente; Ho modificato il tuo jsfiddle per dimostrare qui:

http://jsfiddle.net/9FEne/1/

+0

Questa è una domanda css però e non una domanda javascript ... – Prestaul

+1

In realtà, se leggi la sua domanda, non c'è nulla che suggerisca al fatto che la sua soluzione deve essere css- solo. In effetti sembra che sia un css esausto e abbia ancora bisogno del risultato desiderato. Non sono sicuro del perché una soluzione diversa valga un -1 ... sembra che sarebbe meglio avere tutte le opzioni presentate, no? – OnResolve

+0

Questo è abbastanza giusto, ma questo non è difficile da risolvere con CSS e l'aggiunta di javascript nel mix introduce altri problemi ... E.g. cosa succede quando l'utente ridimensiona il suo browser? – Prestaul

Problemi correlati