Foros del Web » Creando para Internet » CSS »

Posicionar footer en ela parte inferior de la pantalla

Estas en el tema de Posicionar footer en ela parte inferior de la pantalla en el foro de CSS en Foros del Web. Buenas, tenga una página web dinámica, y por tanto con un tamaño variable. Nada mas cargar la web le doy una altura mínima al body ...
  #1 (permalink)  
Antiguo 05/09/2012, 11:18
 
Fecha de Ingreso: agosto-2010
Mensajes: 128
Antigüedad: 14 años, 4 meses
Puntos: 2
Posicionar footer en ela parte inferior de la pantalla

Buenas, tenga una página web dinámica, y por tanto con un tamaño variable. Nada mas cargar la web le doy una altura mínima al body completo igual al tamaño de la pantalla donde se visualice.

El último nodo del body es un footer, que quiero que permanezca, en caso de que el resto del contenido no llene la pantalla, en la parte inferior de esta. Y si el contenido es mayor, simplemente que el pie se muestre a continuación.

En definitiva, necesito darle una coordenada "Y" MINIMA (para el caso de que no se llene la pantalla) dentro de la página a este div.

Con un posicionamiento absoluto no puedo hacerlo, porque si el conteido del body es mayor que la pantalla se me sobrepondría sobre el body el footer.

Como puedo hacerlo?

Gracias
  #2 (permalink)  
Antiguo 05/09/2012, 11:28
Avatar de flashmax  
Fecha de Ingreso: julio-2012
Ubicación: Bs.As. Argentina
Mensajes: 507
Antigüedad: 12 años, 4 meses
Puntos: 86
Respuesta: Posicionar footer en ela parte inferior de la pantalla

as probado con :
bottom: 0px;
position: fixed;
  #3 (permalink)  
Antiguo 05/09/2012, 12:11
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 9 meses
Puntos: 1146
Respuesta: Posicionar footer en ela parte inferior de la pantalla

cuando necesito colocar el pie de pagina hasta abajo cuando no hay suficiente contenido y que baje aun mas cuando el contenido supere el tamaño de pantalla, suelo utilizar esta técnica... revisa el código, pruebalo y adaptalo a tus necesidades.

Código CSS:
Ver original
  1. *{margin:0;padding:0;}/* reset rapido - no recomendado para un sitio en vivo */
  2. p{margin-bottom:10px;}/* reset rapido */
  3. html,body{margin:0;padding:0;height:100%;font:13px/1.5 arial,verdana,tahoma;}
  4. #site{min-height:100%;}
  5. #content{width:900px;margin:auto;padding-bottom:33px;}
  6. #footer{background:#000;height:33px;margin-top:-33px;font:italic 700 11px/33px tahoma,arial,verdana;color:#fff;text-align:center;text-transform:uppercase;}

Código HTML:
Ver original
  1. <div id="site">
  2.     <div id="content">
  3. <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br /><br />hola mundo</p>
  4.     </div>
  5. </div>
  6. <div id="footer">pie de pagina</div>

Nota: no olvides declarar un doctype valido

Etiquetas: contenido, footer, inferior, pantalla, parte, tamaño
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 12:34.