Foros del Web » Creando para Internet » CSS »

Mantener Footer en la parte inferior

Estas en el tema de Mantener Footer en la parte inferior en el foro de CSS en Foros del Web. Hola a todos los Forerosdel Web. He tenido un problema con el cual llevo tiempo, busco soluciones que a la gente le funciona con sus ...
  #1 (permalink)  
Antiguo 03/02/2015, 13:25
Avatar de HackID1  
Fecha de Ingreso: febrero-2013
Ubicación: En Update
Mensajes: 491
Antigüedad: 8 años, 9 meses
Puntos: 17
Pregunta Mantener Footer en la parte inferior

Hola a todos los Forerosdel Web.

He tenido un problema con el cual llevo tiempo, busco soluciones que a la gente le funciona con sus códigos pero al pasar los códigos al mio y añadir más estilo en la parte central de la web ya no funcionan.

Tengo un diseño de una web, con estilo CSS añadido, pero siempre el footer me queda estático en la parte inferior de la pantalla, y cuando el contenido que esta en la parte central supera el limite inferior de la página se sobrepone todo esto al footer

Dejo algo de código que uso porque no se la verdad como mantener el Footer en la parte inferior y a medida que vaya creciendo el contenido central de la web este se vaya posicionando igual en la parte inferior.

Código CSS:
Ver original
  1. * {
  2.         margin:0;
  3.         padding:0;
  4.     }
  5.     html, body {
  6.         height: 100%;
  7.         margin: 0;
  8.         padding: 0;
  9.     }
  10.     body {
  11.         font-family:Helvetica, "Helvetica Neue", Tahoma, sans-serif;
  12.         font-size:12px;
  13.         color:#E6F0D5;
  14.         background: #ebf1f6; /* Old browsers */
  15.        
  16.     }
  17.    
  18.     #wrapper {
  19.         height:98%; /*100%*/
  20.         /*border: 1px solid black;*/
  21.     }
  22.    
  23.     #all {
  24.         position: relative;
  25.         height: 100%;
  26.         width: 100%; /*766px;*/
  27.         margin:0 auto;
  28.     }
  29. nav {
  30.         height: auto; /*Junto a overflow: hidden; aplica a nav mismo alto que el más alto de sus elementos */
  31.         margin: 0 auto; /* Centro el contenedor */
  32.         overflow: hidden;
  33.         text-align: center;
  34.         padding: 3px;
  35.         width: 98%; /* Defino el ancho de mi página */
  36.         /*border: 1px solid blue;*/
  37.     }
  38.        
  39.         ul {
  40.             position: relative;
  41.             left: 50%;
  42.             float: left;
  43.             list-style-type: none;
  44.             padding: 0;
  45.         }
  46.            
  47.         li {
  48.             position: relative;
  49.             padding: 2px;
  50.             right: 50%;
  51.             float: left; /* Flotar los li para ver horizontalmente */
  52.         }
  53.        
  54.         li a {
  55.             text-decoration:none;
  56.         }
  57.        
  58.     #footer {
  59.         position: absolute;
  60.         width:98%;
  61.         bottom: 0%;
  62.         /*height: 4%;
  63.         top: 5%;*/1
  64.         left: 1%;
  65.         right: 4%;
  66.         margin-top: 2%;
  67.         font-family: Helvetica, "Helvetica Neue";
  68.         /*FONDO DEGRADADO */
  69.         background: #ebf1f6; /* Old browsers */
  70.         border: 1px solid #89C3EB;
  71.         border-radius: 5px;
  72.         color: #323232 !important;
  73.     }
  74.    
  75.     #footer a {
  76.         color: black;
  77.         text-decoration: none;
  78.    
  79.     }


y el HTML

Código HTML:
Ver original
  1.     <div id="wrapper">
  2.    
  3.         <div id="all">
  4. <div id="content_izq" class="letras">
  5.  
  6.                 <div id="sliderFrame">
  7.                     <div id="slider">
  8.                             <img src="images/m.jpg" alt="m" width="100%" height="100%"/>
  9.                             <img src="images/2.jpg" alt="e" />
  10.                             <img src="images/p3.png" alt="a" />
  11.                     </div>
  12.                 </div>
  13.                    
  14.             </div>
  15.            
  16.             <div id="content_der" class="letras">
  17.                        
  18.                
  19.             </div>
  20.            
  21.             <div id="footer">
  22.                 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  23.  aaa&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    <a href="login.php"> Login </a>
  24.             </div>
  25.            
  26.            
  27.         </div>
  28.     </div>
  29.  
  30. </body>
  31.  
  32.  
  33. </html>

Si me pueden ayudar, estas es la estructura básica, tiene más CSS añadidos pero no los subo porque son muchos.

Gracias.
__________________
Puntuar +1 es buena forma de dar las gracias. :P
Your Time is limited, so don't waste it living someone else´s life.
Por: HackID1
  #2 (permalink)  
Antiguo 03/02/2015, 17:22
Avatar de fede5426  
Fecha de Ingreso: diciembre-2014
Ubicación: Córdoba
Mensajes: 446
Antigüedad: 6 años, 11 meses
Puntos: 208
Respuesta: Mantener Footer en la parte inferior

Cambia el atributo position de #footer.. de absolute a relative.
  #3 (permalink)  
Antiguo 08/02/2015, 14:28
Avatar de HackID1  
Fecha de Ingreso: febrero-2013
Ubicación: En Update
Mensajes: 491
Antigüedad: 8 años, 9 meses
Puntos: 17
Respuesta: Mantener Footer en la parte inferior

Recuerdo que lo probé con el relative, y no me funcionaba, lo probaré de nuevo haber que tal.
__________________
Puntuar +1 es buena forma de dar las gracias. :P
Your Time is limited, so don't waste it living someone else´s life.
Por: HackID1
  #4 (permalink)  
Antiguo 09/02/2015, 16:53
inazense
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Mantener Footer en la parte inferior

Si el problema es que lo tapa la parte central al ampliarse, puedes darle un valor de position:fixed y para asegurarte de que queda tapado en ningún momento juega con la propiedad z-index, que dará profundidad.

Das un valor más alto al footer y al resto le otorgas uno más bajo. De ese modo el pie quedará siempre visible
  #5 (permalink)  
Antiguo 09/02/2015, 18:44
Avatar de fede5426  
Fecha de Ingreso: diciembre-2014
Ubicación: Córdoba
Mensajes: 446
Antigüedad: 6 años, 11 meses
Puntos: 208
Respuesta: Mantener Footer en la parte inferior

Cita:
Iniciado por inazense Ver Mensaje
Si el problema es que lo tapa la parte central al ampliarse, puedes darle un valor de position:fixed y para asegurarte de que queda tapado en ningún momento juega con la propiedad z-index, que dará profundidad.

Das un valor más alto al footer y al resto le otorgas uno más bajo. De ese modo el pie quedará siempre visible

Con fixed le va a quedar fijo, y lo que quiere es que el contenido lo empuje hacia abajo..
  #6 (permalink)  
Antiguo 10/02/2015, 09:32
Avatar de GemliosG  
Fecha de Ingreso: enero-2015
Ubicación: La Habana
Mensajes: 153
Antigüedad: 6 años, 10 meses
Puntos: 8
Respuesta: Mantener Footer en la parte inferior

Bueno por lo menos a mi me es muy sencillo al momento de crearlo, por ejemplo, creo mi divisor de foot, por debajo de mi contenido, normalmente ya por defecto sin darle atributos, al agregar contenido extra este baja, claro al contenido le pongo la propiedad de height: auto
__________________
GemliosG

Etiquetas: footer
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 11:38.