¿Problema con el pie de página adhesivo de Flexbox?

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

Pregunta

He estado jugando con Flexbox para intentar hacer un pie de página adhesivo, pero por alguna razón, ¿uno de mis divs se superpone al pie de página?Cuando arrastro la ventana a un monitor más grande, el pie de página es perfecto.¿Qué estoy haciendo mal?

Además, preferiría utilizar este método en lugar de otros métodos, como el table método.

Aquí está mi diseño HTML:

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

dentro de mi mainContent div tengo la parte superior completa de mi sitio web, incluido el encabezado.Sólo necesito usarlo como el Contenido completo y luego tener mi pie de página.

Aquí está el CSS que tengo:

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;
}

Incluso he probado esto: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

Pero tengo el mismo problema que estoy encontrando actualmente.

ACTUALIZAR

Como se solicitó en los comentarios, configuré mi div de contenido principal en overflow: auto; pero mi contenido estaba cubierto por el pie de página.¿Cómo solucionaría esto?

¿Fue útil?

Solución

Debe agregar algunas reglas más a su CSS para obtener el resultado que busca.Tal como está ahora, básicamente indica que cuando se reduce el espacio, su contenido principal debería ocupar más espacio.Por lo tanto, el pie de página en realidad no se superpone sino que su tamaño disminuye.

Aquí hay algo que había hecho hace unos meses...Muchas reglas en CSS son heredadas, así que tenga cuidado, pero creo que se acerca a lo que pretende hacer:http://plnkr.co/edit/o2BAwvg3XV4YjwAwwmYR?p=preview

Pero realmente te animo a que uses esto para crear tus reglas CSS flexibles:http://the-echoplex.net/flexyboxes/

Otros consejos

Pasé mucho tiempo antes de encontrar estas soluciones rápidas y sólidas usando CSS3 Flexbox o Grid para resolver este problema.Espero que esto ayude. 

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

Esto debería funcionar tanto para IE como para Chrome:

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

main {
  flex: 1 0 auto;
}

footer, header {
    flex-shrink: 0;
}

También puedes probar el diseño de cuadrícula mediante

html {
  height: 100%;
}

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

footer {
  grid-row: 3/4;
}

Consulte mi sitio web: http://matthiassommer.it/web/javascript/sticky-footer-css3-flexbox-grid/

Sé que ya se aceptó una respuesta, pero aquí tengo un ejemplo muy simple que utiliza solo el código que necesita (y algo de JavaScript para demostrarlo).

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

Esto es lo que está pasando:

Primero configuras el body y el html al 100% de la altura del navegador.

html,
body { height: 100%; }

Luego configuras un elemento contenedor para que tenga un min-height del 100%, y para mostrar flex.La columna asegura que los elementos no se coloquen uno al lado del otro.

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

Y ahora el pie de página se pone margin-top de auto.Esto lo ubica en la parte inferior de la ventana del navegador.

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

Nota:Asegúrese de incluir cualquier estilo de navegador antiguo y tenga cuidado con Safari 8.A veces esto puede resultar complicado.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top