Come creare un footer sticky fluido

Sto cercando una soluzione per avere un piè di pagina appiccicoso che l'altezza può dipendere dalla larghezza del browser.Come creare un footer sticky fluido

I piè di pagina adesivi nei progetti di fluidi non sono poi così banali. Ho trovato suggerimenti, discussioni e soluzioni per implementare footer sticky. Tuttavia, tutti questi dipendono da un'altezza fissa e nota del piè di pagina. Nel mio caso, l'altezza del piè di pagina contiene testo e il numero di linee dipende dalla larghezza dello schermo.

Piuttosto che creare un sacco di domande sui media e costruire un po 'di lavoro, preferirei una soluzione CSS pulita in cui il sticky footer si adatta automaticamente quando la larghezza dello schermo varia.

Qualcuno di voi ha la risposta definitiva?

fonte

2013-06-03 Paul van Haren

possibile duplicato del [CSS Sticky piè di pagina con Unknown Altezza] (http://stackoverflow.com/questions/4347133/css-sticky-footers-with-unknown-height) – cimmanon

Sì, la questione è una specie di duplicare, ma le risposte non sono soddisfacenti. Fortunatamente, ha indirizzato il mio verso un altro post con delle indicazioni che soddisfano le mie esigenze: http://stackoverflow.com/questions/12605816/sticky-flexible-footers-and-headers-css-working-fine-in-webkit-but- non-in-geco. Grazie per aver esaminato questo. –

Non hai menzionato che uno degli elementi ha 'overflow: scroll' su di esso. – cimmanon

provare qualcosa di simile:

http://jsfiddle.net/6BQWE/2/

Dove l'altezza del piè di pagina appiccicoso è relativo alla altezza del contenitore, con una percentuale:

#sticky_footer { 
    position:fixed; 
    bottom:0; 
    left:0; 
    width:100%; 
    height:10%; 
    background:red; 
    text-align:center; 
}

potrebbe essere necessario ordinare un margine/riempimento per il testo con le query multimediali, ma le dimensioni del piè di pagina saranno dinamiche senza di esse.

fonte

2013-06-03 17:29:05 peterpixels

Benvenuti nel magico mondo di FlexBox! Prova questo fuori ... http://jsfiddle.net/n5BaR/

<body> 
    <style> 
     body { 
      padding: 0; margin: 0; 
      display: flex; 
      min-height: 100vh; 
      flex-direction: column; 
     } 
     main { 
      flex: 1; 
      padding: 1em; 
     } 
     header, footer { 
      background-color: #abc; 
      padding: 1em; 
     } 
    </style> 
    <header>Hello World</header> 
    <main>Content</main> 
    <footer> 
     Quisque viverra sodales sapien, in ornare lectus iaculis in. Nam dapibus, metus a volutpat scelerisque, ligula felis imperdiet ipsum, a venenatis turpis velit vel nunc. In vel pharetra nunc. Mauris vitae porta libero. Ut consectetur condimentum felis, sed mattis justo lobortis scelerisque. 
    </footer> 
</body>

Le imbottiture e dei margini sono solo per essere un po 'bella, ma la magia accade con display: flex; min-height: 100vh; flex-direction: column; e flex: 1;.

Per maggiori informazioni e altri esempi, vedere http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

Da Mozilla ...

Il CSS3 Flexible Box, o FlexBox, è una modalità di layout che prevede la disposizione degli elementi in una pagina in modo tale che gli elementi si comportino in modo prevedibile quando il layout della pagina deve adattarsi alle diverse dimensioni dello schermo e ai diversi dispositivi di visualizzazione. ... Nota: sebbene la specifica CSS flessibile Layout di box sia nella fase Candidate Recommendation, , non tutti i browser l'hanno implementata.

fonte

2013-12-06 19:51:49 Luke

Questa dovrebbe essere una risposta n. Ho scavato attraverso tanti post stasera. Felicemente, ho trovato il tuo! –

risposta

Problemi correlati