Problema FlexBox Sticky Footer?

StackOverflow https://stackoverflow.com//questions/23026696

Domanda

Ho giocato con Flexbox per cercare di fare un footer appiccicoso, ma qualche ragione, uno dei miei div si sovrappone al piè di pagina? Quando trascingo la finestra su un monitory più grande, il piè di pagina è perfetto. Cosa sto facendo male?

Inoltre, preferirei utilizzare questo metodo invece di altri metodi, come il metodo table.

Ecco il mio layout HTML: 

<body>
    <div class="mainContent">...</div>
    <div class="footer">...</div>
</body>
.

All'interno del mio div mainContent ho la parte superiore completa del mio sito web, inclusa l'intestazione. Ho solo bisogno di usarlo come intero contenuto e poi ha il mio piè di pagina.

Ecco il CSS che ho: 

body
{
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    min-height: 100vh;
}

.mainContent
{
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-flex: 1;
}

.footer
{
    height: 75px; 
    background: #222;
    color:#EEE;
}
.

Ho addirittura provato questo: http://philipwalton.github .io / solved-by-flexbox / demo / sticky-footer /

Ma ottengo lo stesso problema di quello che attualmente sto incontrando.

Aggiornamento

Come richiesto nei commenti, ho impostato il mio contenuto principale div a overflow: auto; ma il mio contenuto è stato coperto dal piè di pagina. Come vorrei risolvere questo?

È stato utile?

Soluzione

È necessario aggiungere alcune ulteriori regole nel tuo CSS per ottenere il risultato che cerchi. Come è ora, è sostanzialmente affermato che quando lo spazio si riduce, il tuo contenuto principale dovrebbe richiedere più spazio.Pertanto, il piè di pagina non viene sovrapposto, ma piuttosto la sua dimensione diminuisce.

Ecco qualcosa che avevo fatto alcuni mesi fa ... un sacco di regole nel CSS sono legacy, quindi fai attenzione ma credo che sia vicino a ciò che miri a fare: http://plnkr.co/edit/o2bawvg3xv4yjwawwmyr?p=preview

Ma davvero ti incoraggio a usare questo per creare le tue regole Flex CSS: http://the-echoplex.net/flexyboxes/

Altri suggerimenti

Ho passato molto tempo prima se ha trovato queste soluzioni rapide e robuste usando CSS3 FlexBox o Grid per risolvere questo problema.Spero che aiuti.

<body>
  <header></header>
  <main></main>
  <footer></footer>
</body>
.

Questo dovrebbe funzionare per entrambi per IE e Chrome: 

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

main {
  flex: 1 0 auto;
}

footer, header {
    flex-shrink: 0;
}
.

Puoi anche provare il layout della griglia di 

html {
  height: 100%;
}

body {
  min-height: 100%;
  display: grid;
  grid-template-rows: 1fr 1fr auto;
}

footer {
  grid-row: 3/4;
}
.

Riferisci il mio sito web: http://matthiassommer.it/Web / JavaScript / Sticky-Footer-CSS3-Flexbox-Grid /

So che una risposta è già stata accettata, ma ho qui un esempio molto semplice usando solo il codice di cui hai bisogno (e alcuni JavaScript per dimostrare).

https://codepen.io/alexmccabe/pen/rgmbjj

Ecco cosa sta succedendo:

Prima imposta il body e il html al 100% dell'altezza del browser. 

html,
body { height: 100%; }
.

Quindi si imposta un elemento wrapper per avere un min-height del 100% e visualizzare Flex.La colonna assicura che gli elementi non vengono posizionati accanto all'altro. 

.site-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}
.

E ora il piè di pagina ottiene margin-top di auto.Questo lo sietiene in fondo alla finestra del browser. 

.site-footer {
    margin-top: auto;
}
.

Nota: assicurati di includere tutti gli stili di browser antichi e fai attenzione a Safari 8. A volte può essere un ingannato a volte.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top