CSS Sticky Footer - Con Margine

Sto cercando di applicare questo metodo dello Sticky piè di pagina: http://code.google.com/p/cleanstickyfooter/CSS Sticky Footer - Con Margine

E le grandi opere, però, ho un problema. Il design per il mio sito particolare ha un margine di 34 pixel nella parte superiore della pagina. Quindi ho provato alcuni modi per implementarlo, facendo body {margin-top:34px} o facendo container {margin-top:34px}.

Tuttavia, in entrambi i casi, il Sticky Footer viene incasinato. Quando provo a compensare il 34px, non sembra mai funzionare.

Qualche idea?

Ecco un esempio Fiddle: http://jsfiddle.net/jrZKb/

fonte

2013-04-09 djt

ci mostri il tuo sito web o un esempio del problema con il tuo codice specifico? –

Saremo in grado di aiutare meglio se potessi pubblicare un link al tuo sito web o creare un violino per dimostrarlo. – Arbel

OK, ecco un Fiddle: http://jsfiddle.net/jrZKb/ – djt

Utilizzando il Modern Clean CSS Sticky Footer, che sta funzionando (su Firefox e IE9):

http://jsfiddle.net/jrZKb/1/

<body> 
    <header> Header</header> 
    <article>Lorem ipsum...</article> 
    <footer></footer> 
</body> 

html { 
    position: relative; 
    min-height: 100%; 
} 
body { 
    margin: 0 0 100px; /* bottom = footer height */ 
} 
header 
{ 
    background-color: green; 
} 
footer { 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    height: 100px; 
    width: 100%; 
    background-color: blue; 
}

fonte

2013-04-09 04:54:13 Alyce

Wow, questo è davvero fantastico. Non l'ho mai visto prima. Funziona davvero bene! – djt

Non l'ho visto neanche fino a quando ho cercato su Google solo in quel momento, sembra buono ... Penso che potrei aggiornare il mio sito ... – Alyce

CSS Sticky Footer - Con Margine

risposta

Problemi correlati