Tema: Mantener Footer en la parte inferior
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 03/02/2015, 13:25
Avatar de HackID1
HackID1
 
Fecha de Ingreso: febrero-2013
Ubicación: En Update
Mensajes: 492
Antigüedad: 11 años, 2 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. <body>
  2.     <div id="wrapper">
  3.     
  4.         <div id="all">
  5. <div id="content_izq" class="letras">
  6.  
  7.                 <div id="sliderFrame">
  8.                     <div id="slider">
  9.                             <img src="images/m.jpg" alt="m" width="100%" height="100%"/>
  10.                             <img src="images/2.jpg" alt="e" />
  11.                             <img src="images/p3.png" alt="a" />
  12.                     </div>
  13.                 </div>
  14.                     
  15.             </div>
  16.             
  17.             <div id="content_der" class="letras">
  18.                         
  19.                 
  20.             </div>
  21.             
  22.             <div id="footer">
  23.                 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  24.  aaa&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    <a href="login.php"> Login </a>
  25.             </div>
  26.             
  27.             
  28.         </div>
  29.     </div>
  30.  
  31. </body>
  32.  
  33.  
  34. </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