footer in fondo al browser se pagina corta

[Silver]

oggetto contorto ma vedo di spiegarmi:
vorrei posizionare imFooterBg e tutto quello che contiene in modo che stia fisso al bordo inferiore della finestra
quando questa è più alta della pagina come con questo


#imFooterBg { border-top: 2px solid #999; position: fixed; bottom: 0; }


ma che quando la pagina è più lunga della finestra si comporti normalmente e vada in fondo ai contenuti.
Come si risolve?

[tigrone]

Mhhh... quesito interessante...


Di primo acchito, mi sa che con solo i css non si può fare...
Magari con javascript si... rilevando le dimensioni della finestra del browser e del div principale... facendo eseguire dei calcoli da js o da php (o magari una combinazione dei 2, ajax???) si potrebbe far caricare il codice css giusto per il footer; ma si dovrebbe ricaricare la pagina... a meno che non arrivi la pantera rosa a sciorinare una funzione ad hoc... :-)

[stesil]

Ciao,

sì, qualcosa ho scritto ... lavorare con le altezze è un pasticcio ... questa mi pare funzioni:

Codice:

Only registered users can see contents. Please click here to Register or Login.
Al caricamento del documento viene rilevata l'altezza della finestra del browser (hwin) e l'altezza della pagina (h) ed assegnata la posizione fixed al footer solo se l'altezza della finestra supera quella della pagina. Non ho inserito nel codice js il bordo che può essere assegnato con css se la sua presenza è indipendente dalla lunghezza della pagina ... se ho pensato male si può aggiungere nelle proprietà css da assegnare.

Stavo cercando di fare in modo che, al ridimensionamento della finestra, venissero ricalcolati i valori ... ma non mi convince l'effetto che ottengo ... la posto comunque, giusto per provarla e magari correggerla.

Codice:

Only registered users can see contents. Please click here to Register or Login.

[Silver]

col secondo non ho notato effetti particolari,comunque il primo è ottimo per quello che sto facendo avendo il progetto ha uno sfondo trasparente.
Se invece utilizzassi un colore o la classica immagine che si ripete si noterebbe il distacco tra il content e il footer nelle pagine corte.


Grande come sempre, doppio applauso   

[stesil]

col secondo non ho notato effetti particolari,

Già .... la funzione resize non funziona nè con Chrome, nè con IE7/8 ... e non ho idea del perchè. Analoga funzione con la larghezza dinamica della pagina funziona bene. Visto che non serve, lascio stare.

comunque il primo è ottimo per quello che sto facendo avendo il progetto ha uno sfondo trasparente.
Se invece utilizzassi un colore o la classica immagine che si ripete si noterebbe il distacco tra il content e il footer nelle pagine corte.

Giusta precisazione. In questo caso lo script che ho postato non sarebbe la soluzione al problema: per colmare il vuoto occorrerebbe agire più che sulla posizione del footer sulla lunghezza della pagina .... e servirebbe un altro script.

Ciao

[tigrone]

per colmare il vuoto occorrerebbe agire più che sulla posizione del footer sulla lunghezza della pagina .... e servirebbe un altro script.

Si potrebbe agire sull'altezza del footer... nel senso di 'alzarlo' mantenendolo 'incollato' alla base dello schermo...

[lemonsong]

Riesumo questo vecchio topic per un piccolo aggiornamento allo script di stesil, valido per le versioni 10 e 11 con l'inserimento del calcolo della nuova altezza di imContent e imContentGraphics nelle pagine corte.

Lo script funziona solo al caricamento della pagina e non al resize:

Codice:

Only registered users can see contents. Please click here to Register or Login.
Ovviamente possiammo aggiungere più proprietà CSS per gli id imFooter e imFooterBg

Si consiglia di abbassare l'altezza minima del contenuto della pagina (esempio a 80) per rendere visibile l'effetto anche a chi ha risoluzioni relativamente basse.