Sticky footer con multiple background.

**furiabuia** · 12-04-2013, 00:33

Buongiorno, sto cercando di sistemare un problema sul sito unirr.it
Il sito usa uno sticky footer e alcuni background sovrapposti.
Il footer l'ho impostato correttamente, ma non riesco a riempire lo spazio tra header e footer quando il contenuto non arriva al 100% dell'altezza della pagina.
So che dipende dal fatto che il div wrapper ha impostato "height:auto" e quindi i child non riescono a sapere quale sia il 100% di auto.
Per ora ho inserito una altezza fissa di 1080px all'ultimo div in modo da posizionare il background correttamente, almeno fino ad una certa risoluzione, ma naturalmente ridimensionando la pagina ad un certo punto il content si stacca dal footer, ed in ogni caso con risoluzioni inferiori il footer è visibile scrollando una pagina vuota.
Ho dovuto annidare 6 div per associare ad ognuno un pezzo di sfondo.
Potrei usare dei background multipli sul primo div, ma non verrebbero visualizzati da IE8.
Ci sono altri modi per associare background ad oggetti che prendano l'altezza del div wrapper, oppure per forzare dinamicamente l'altezza dei child in modo che siano sempre agganciati al footer?

L'HTML (semplificato) è il seguente:

codice:

<html>
 <body>
  <div id="ja-wrapper">
   <div id="ja-wrapper-inner">
    <div id="ja-wrapper-inner1">
     <div id="ja-wrapper-inner2">
      <div id="ja-wrapper-bottom-r">
       <div id="ja-wrapper-bottom">				

        <div id="ja-container">
        qui c'è il contenuto del sito
        </div>

        <div id="push-footer">
        </div>	

       </div>
      </div>
     </div>
    </div>
   </div>
  </div>

  <div id="ja-bottom">
  qui c'è il footer
  </div>

 </body>
</html>

il CSS è il seguente:

codice:

html, body {
	height: 100%;
	padding: 0;
	margin:0;  
	}

#ja-wrapper { 
	background: url(../images/canvas-pia.jpg) center 348px repeat;
	min-height: 100%;
    	height: auto !important;
    	height: 100%;
    	margin: 0 auto -150px; 
	}

#ja-wrapper-inner {
	background: url(../images/bgd-sfuma.png) bottom center repeat-y; 
	}
	
#ja-wrapper-inner1 {
	background: url(../images/bgd-wrapper.png) top center  repeat-x; 
	}
	
#ja-wrapper-inner2 {
	background: url(../images/bgd-wrapper-inn.png) top center no-repeat; 
	}
	
#ja-wrapper-bottom-r {
	background: url(../images/bgd-bottom-r.png) center bottom 150px repeat-x;
	}

#ja-wrapper-bottom {
	background: url(../images/bgd-bottom.png) center bottom 150px no-repeat;
	min-height: 1080px;

#push-footer, #ja-bottom {
	height:150px;
	}

grazie per le risposte che vorrete fornirmi.

**deleted_129** · 12-04-2013, 03:03

Elimina tutto sto codice, fai una struttura buona e usa il background-position ... risparmi tempo e sopratutto fai un buon codice. Spero di aver capito bene il problema, in caso contrario se non dovessi risolvere con il background-position o non è questo il problema ti prego di fare una semplice domanda perchè non ho capito neanche il risultato che vuoi ottenere.

**furiabuia** · 12-04-2013, 12:03

Originariamente inviato da darkhero
Elimina tutto sto codice, fai una struttura buona e usa il background-position ... risparmi tempo e sopratutto fai un buon codice. Spero di aver capito bene il problema, in caso contrario se non dovessi risolvere con il background-position o non è questo il problema ti prego di fare una semplice domanda perchè non ho capito neanche il risultato che vuoi ottenere.

Il risultato che cerco è questo: Il footer deve stare sempre incollato a fondo pagina, sia quando il contenuto è abbondante, sia quando sono solo poche righe. Questa parte funziona già. La parte che non mi funziona sta nel background tra header e footer. Quando il contenuto è abbondante tutto lo sfondo si estende fino ad agganciarsi al footer, ma quando il contenuto è scarso, anche lo sfondo si ferma prima di incontrare il footer, e rimane uno spazio bianco tra header e footer. Basta rimpicciolire lo zoom di una pagina per vedere che ad un certo punto il footer si sgancia dal resto.
Il background-position funziona con un solo background, a meno di non utilizzare le specifiche css3 che permettono ad un unico elemento di associarvi più background. ognuno con diversa position. Ma in questo modo IE8 vede solo uno di tali background.
E' per questo che ho dovuto inserire una struttura nidificata.
La domanda (provo a semplificare) è questa: Come posso far assumere ai <div> interni la stessa altezza del <div> esterno?
O, in alternativa, come posso associare più background ad un unico <div> e farli vedere anche in IE8?

**deleted_129** · 12-04-2013, 12:36

Allora basta mettere il min-height:100% all'header ( solo all'header) cosi' da agganciarsi al footer...teoricamente, poi non so cosa c'e' nel codice...

**furiabuia** · 12-04-2013, 12:51

E' già così, e infatti il primo background si estende correttamente fino al footer. Il problema sono i background che ho annidato dentro al primo e che non prendono il min-height:100%.
Forse sbaglio ad annidarli?

Discussione: Sticky footer con multiple background.

Strumenti discussione

Ricerca discussione

Visualizza

Sticky footer con multiple background.

Permessi di invio