Mantener Footer en la parte inferior

HackID1 · #1 (**permalink**) 03/02/2015, 13:25

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* {
        margin:0;
        padding:0;
    }
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    body {
        font-family:Helvetica, "Helvetica Neue", Tahoma, sans-serif;
        font-size:12px;
        color:#E6F0D5;
        background: #ebf1f6; /* Old browsers */
        
    }
    
    #wrapper {
        height:98%; /*100%*/
        /*border: 1px solid black;*/
    }
    
    #all {
        position: relative;
        height: 100%;
        width: 100%; /*766px;*/
        margin:0 auto;
    }
nav {
        height: auto; /*Junto a overflow: hidden; aplica a nav mismo alto que el más alto de sus elementos */ 
        margin: 0 auto; /* Centro el contenedor */
        overflow: hidden;
        text-align: center;
        padding: 3px;
        width: 98%; /* Defino el ancho de mi página */
        /*border: 1px solid blue;*/
    }
        
        ul { 
            position: relative; 
            left: 50%;
            float: left;
            list-style-type: none;
            padding: 0;
        }
            
        li {
            position: relative; 
            padding: 2px;
            right: 50%;
            float: left; /* Flotar los li para ver horizontalmente */
        }
        
        li a {
            text-decoration:none;
        }
        
    #footer {
        position: absolute;
        width:98%;
        bottom: 0%;
        /*height: 4%;
        top: 5%;*/1
        left: 1%;
        right: 4%;
        margin-top: 2%;
        font-family: Helvetica, "Helvetica Neue";
        /*FONDO DEGRADADO */
        background: #ebf1f6; /* Old browsers */
        border: 1px solid #89C3EB;
        border-radius: 5px;
        color: #323232 !important;
    }
    
    #footer a {
        color: black;
        text-decoration: none;
    
    }

y el HTML

Código HTML:

Ver original<body>
    <div id="wrapper">
    
        <div id="all">
<div id="content_izq" class="letras">
 
                <div id="sliderFrame">
                    <div id="slider">
                            <img src="images/m.jpg" alt="m" width="100%" height="100%"/>
                            <img src="images/2.jpg" alt="e" />
                            <img src="images/p3.png" alt="a" />
                    </div>
                </div>
                    
            </div>
            
            <div id="content_der" class="letras">
                        
                
            </div>
            
            <div id="footer">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 aaa&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    <a href="login.php"> Login </a>
            </div>
            
            
        </div>
    </div>
 
</body>
 
 
</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.

fede5426 · #2 (**permalink**) 03/02/2015, 17:22

Cambia el atributo position de #footer.. de absolute a relative.

HackID1 · #3 (**permalink**) 08/02/2015, 14:28

Recuerdo que lo probé con el relative, y no me funcionaba, lo probaré de nuevo haber que tal.

#4 (**permalink**) 09/02/2015, 16:53

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

fede5426 · #5 (**permalink**) 09/02/2015, 18:44

Cita:

Iniciado por inazense

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

GemliosG · #6 (**permalink**) 10/02/2015, 09:32

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