CSS + Scroll

aledone

CSS + Scroll

Ciao a tutti, avrei un quesito da sottoporvi.

Nella pagina al link seguente ho caricato un esempio per spiegarmi meglio.

Vorrei, se possibile, far scorrere la pagina fino a quando il rettangolo blu (footer) si congiunge con il rettangolo grigio (header) indipendentemente dalle dimensioni della pagina.

E' possibile?

Grazie

karedas

Ciao Aledone e benvenuto nel forum GT

A prima vista non sembra possibile farlo, almeno senza l'uso di uno script aggiuntivo. Però dopo un pò di prove penso di esser arrivato a qualche soluzione però un pò scomoda quindi sconsigliata essendo poco gestibile e soprattutto non al 100% funzionante su ogni risoluzione e browser:

Imposti il div "wrapper" con position relative e dai al footer il codice seguente:

#footer{
width:100%;
height:50%;
position:absolute;
bottom:0
}

L'altezza è solo d'esempio solo perchè sul mio computer pare bastare (ed eccedere direi).

Ripeto non so se funzionerà comunque o per chiunque ma sul mio pc con Firefox pare andare. Ma la position Fixed personalmente la sconsiglio sempre.

Ciao!

aledone

Grazie per il benvenuto e per la risposta.

In effetti io nel frattempo avevo pensato ad una soluzione simile, ho aggiunto un secondo "footer" settando l'altezza a 40%, ho fatto un po' di prove e nonostante non sia ovviamente precisa visto che dipende dal monitor e dalla risoluzione il 40% è una via di mezzo che accontenta un po' tutte le condizioni.

Per quanto riguarda il fixed, confermo, con ie sballa tutto!

Ho trovato una soluzione con uno script.

Se nel frattempo a qualcuno venisse in mente un'altra soluzione benvenga.

ciao

misterwo

Ciao, perdonami ma non ho capito...
Ti riporto un link e mi dici se è quello che ti serviva ok?

h t tp :// ryanfait. com/sticky-footer/

Questo permette al footer di rimanere sempre in basso...era questo che ti serviva?

aledone

In realtà io vorrei che che il footer scrollasse normalmente, solo che invece che fermarsi non appena compare nella pagina continui fino a bloccarsi direttamente sotto all'header.

ciao e grazie