footer posición bottom

lamenenchu · #1 (**permalink**) 28/01/2016, 06:20

Hola a todos... Estoy dándole la vuelta a la posición del footer y ya empieza a desesperarme el tema...

Sé cómo debería fijarse en la parte inferior el footer, pero como estoy utilizando tecnologias diferentes, pues me lleva por la calle de la amargura. Me explico:

Tengo una aplicación en struts2 la cual está separada en 3 archivos diferentes. El top, el body y el footer. Y sus respectivas páginas jsp (es decir, inicio, contaco...) donde mediente código va llamando a las partes de la cabecera, body y footer.

Pues bien. Como podría solucionar el tema del footer. Si pongo posición absoluta, se va abajo, pero a la que hago pequeño el navegador se queda el footer en medio del contenido. Y si le pongo relativa, pues se queda al final de contenido.
Alguna idea??? os paso el código. Muchas gracias

Código:

html, body{
    height: 100%;
    width: 100%;
}
.wrapper{
     min-height: 100%;
    position: relative;
}
.container{
    width: 100%;
    padding: 0;
    min-height: 100%;
    height: 100%;
    position:relative;
}
footer{
    background-color: #000;
    width: 100%;
    clear: both;
    padding: .5em 0;
    height: 20px;  
   position: absolute;
   bottom: 0;
    font-family:century-gotic, sans-serif; 
}

Este es el código de una página.jsp

Código:

<body id="home">
    <div class="wrapper">
    <div class="container">
  <section>
 <div class="sectionimg"></div>
   </section>
</div>
        </div>
</body>

g3kdigital · #2 (**permalink**) 28/01/2016, 10:24

mmm y probaste así?

Código CSS:

Ver original.footer
{
    position: fixed;
    bottom: 0;
}

lamenenchu · #3 (**permalink**) 01/02/2016, 01:30

Cita:

Iniciado por g3kdigital

mmm y probaste así?

Código CSS:

Ver original.footer
{
    position: fixed;
    bottom: 0;
}

Siiiii... pero no sé pq no funciona. Es decir, que no se queda abajo pegado.

g3kdigital · #4 (**permalink**) 01/02/2016, 07:55

Me gustaría ver el html y css completo, porque por ejemplo en el código que colocas no esta el footer

Código HTML:

Ver original<body id="home">
  <div class="wrapper">
    <div class="container">
      <section>
        <div class="sectionimg"></div>
      </section>
    </div>
  </div>
</body>

Sí quieres puedes hacer una demo en codepen.io

Así por encima y sin código, puedo suponer que tiene algo que ver con el modelo de caja, por ejemplo. usa box-sizing y prueba a ver que sucede:

Código CSS:

Ver original*{box-sizing: border-box;}

Lo otro que te puedo recomendar es el website del viejo sticky footer:

http://ryanfait.com/resources/footer...ottom-of-page/

O a mi parecer el más claro es Chris Coyier (aunque sea practicamente lo mismo):
https://css-tricks.com/snippets/css/sticky-footer/

Incluso ahora se resuelve con flexbox:
https://philipwalton.github.io/solve...sticky-footer/

Nos cuentas a ver que tal.

lamenenchu · #5 (**permalink**) 01/02/2016, 08:04

[QUOTE=g3kdigital;4773200]Me gustaría ver el html y css completo, porque por ejemplo en el código que colocas no esta el footer

Gracias por tu respuesta... Creo que el problema lo tenía con las queries. Le he puesto posición fija y en las media query lo mismo. Y de momento se ha solucionado... todo sea que toque alguna cosa más y se me descuadre todo de nuevo. Pero de ahí se aprende.