Foros del Web » Creando para Internet » CSS »

footer posición bottom

Estas en el tema de footer posición bottom en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 28/01/2016, 05:20
 
Fecha de Ingreso: mayo-2015
Mensajes: 92
Antigüedad: 4 años, 1 mes
Puntos: 1
footer posición bottom

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>
  #2 (permalink)  
Antiguo 28/01/2016, 09:24
Avatar de g3kdigital  
Fecha de Ingreso: noviembre-2013
Ubicación: En mi apartamento en bogotá
Mensajes: 208
Antigüedad: 5 años, 8 meses
Puntos: 39
Respuesta: footer posición bottom

mmm y probaste así?

Código CSS:
Ver original
  1. .footer
  2. {
  3.     position: fixed;
  4.     bottom: 0;
  5. }
__________________
Puedes ser el tipo de persona que se amarga por lo inevitable o aceptar el reto de superarse siempre e ir a la par con el progreso.

WEB: G3K.co | codepen.io/g3kdigital
  #3 (permalink)  
Antiguo 01/02/2016, 00:30
 
Fecha de Ingreso: mayo-2015
Mensajes: 92
Antigüedad: 4 años, 1 mes
Puntos: 1
Respuesta: footer posición bottom

Cita:
Iniciado por g3kdigital Ver Mensaje
mmm y probaste así?

Código CSS:
Ver original
  1. .footer
  2. {
  3.     position: fixed;
  4.     bottom: 0;
  5. }

Siiiii... pero no sé pq no funciona. Es decir, que no se queda abajo pegado.
  #4 (permalink)  
Antiguo 01/02/2016, 06:55
Avatar de g3kdigital  
Fecha de Ingreso: noviembre-2013
Ubicación: En mi apartamento en bogotá
Mensajes: 208
Antigüedad: 5 años, 8 meses
Puntos: 39
Respuesta: footer posición bottom

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
  1. <body id="home">
  2.   <div class="wrapper">
  3.     <div class="container">
  4.       <section>
  5.         <div class="sectionimg"></div>
  6.       </section>
  7.     </div>
  8.   </div>
  9. </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
  1. *{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.
__________________
Puedes ser el tipo de persona que se amarga por lo inevitable o aceptar el reto de superarse siempre e ir a la par con el progreso.

WEB: G3K.co | codepen.io/g3kdigital
  #5 (permalink)  
Antiguo 01/02/2016, 07:04
 
Fecha de Ingreso: mayo-2015
Mensajes: 92
Antigüedad: 4 años, 1 mes
Puntos: 1
Respuesta: footer posición bottom

[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.

Etiquetas: background, bottom, color, footer, html, todo, width
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:05.