Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » CSS » Footer no se mantiene abajo

CSS - Footer no se mantiene abajo

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil

Footer no se mantiene abajo

Publicado por Alberto (2 intervenciones) el 10/12/2015 23:05:18
Hola chicos, veréis tengo un footer colocado abajo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
footer{
	width: 100%;
    height: 60px;
    position: absolute;
    bottom: 0 !important;
    left: 0;
    background: #222222;

    color: white;
    margin-top: 5%;
}
 
footer p{
	display: inline-block;
	margin: 1%;
}
 
footer div{
	margin: 1% 0 0 70%;
	display: inline-block;
	height: 30px;
	width: 18%;
}
 
footer div img{
	margin-left: 2%;
}

El problema es que tengo algunas páginas en las que descubro algunos div con display: none; pero al hacer esto se extiende hacia abajo la página y el footer se queda inmóvil y solpado sobre los nuevos elementos. ¿Alguien puede ayudarme?

Edito: se me olvidaba decir que consigo dejarlo abajo al ponerle el atributo position: fixed, de esta forma si se queda abajo, pero el div se queda por detrás del footer, intento ponerle un margin-bottom al div en cuestión pero no toma el footer como referencia. Con margin-top en el footer tampoco..
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Jordi

Footer no se mantiene abajo

Publicado por Jordi (2 intervenciones) el 11/12/2015 07:49:55
¿Has probado con position : relative?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
-1
Comentar
sin imagen de perfil

Footer no se mantiene abajo

Publicado por Alberto (2 intervenciones) el 11/12/2015 15:52:15
Si, pero si le pongo relative al footer entonces no se pone abajo, en cada página me aparece en un sitio distinto... :S
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de txema
Val: 39
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Footer no se mantiene abajo

Publicado por txema (4 intervenciones) el 12/12/2015 00:20:33
Hola Alberto:

Entiendo que se solape tu footer ya que CSS respeta el orden de las instrucciones que recibe.

Deberías probar con z-index: 100; en footer (te he puesto el valor 100 por poner un número: podría ser 5, 50 ó 1000)

Aunque nunca me gustó la etiqueta, creo que en este caso debes recurrir a élla.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de daniel

Footer no se mantiene abajo

Publicado por daniel (2 intervenciones) el 13/12/2015 16:00:29
Hola, hice una prueba y comprobe que usando este codigo y cambiando el tamaño del header puedo mantener siempre a footer abajo, haciendolo responsive...
Espero haber ayudado en algo...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html>
<head>
<title>Hola Mundo</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
header{
postition:relative;
margin:0 auto;
background-color:#ccc;

padding:5px;
height:600px;
}
 
header p{
text-align:center;
color:#222;

}
 
footer{
postition:relative;
margin:0 auto;
background-color:#222;

padding:5px;
}
 
footer p{
text-align:center;
color:#ccc;

}
</style>
</head>
<body>
<header>
<p>este es el header</p>
</header>
<footer>
<p>este es el footer</p>
</footer>
</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Footer no se mantiene abajo

Publicado por walter (47 intervenciones) el 14/12/2015 14:44:52
probaste con un clear? fijate esta web:
http://sonidosdistantes.com.ar/sweet/
se ubica antes de cerra el contenedor
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Footer no se mantiene abajo

Publicado por Jonathan (1 intervención) el 28/02/2024 00:01:19
Hola, a mi me pasaba, yo lo que hago es poner el footer después del contenido principal (main), pero al contenedor del main le pongo en el css una altura máxima (tú decides cuánto) y el footer siempre se va a quedar abajo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Maycoll

Footer no se mantiene abajo

Publicado por Maycoll (3 intervenciones) el 14/12/2015 16:09:04
Hola, a mi no me funcionó, me queda el footer a media pantalla

Not-work.fw

Por lo que estuve viendo el código y lo cambié un poquito.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html>
    <head>
        <title>Hola Mundo</title>
        <style type="text/css">
            *{
                margin:0px;
                padding:0px;
            }
            header{
                postition:relative;
                margin:0 auto;
                background-color:#ccc;

                padding:5px;
                height:600px;
            }
 
            header p{
                text-align:center;
                color:#222;

            }
 
            footer{
                postition:relative;
                background-color:#222;

                padding:5px;
                height: 100%;
            }
 
            footer p{
                text-align:center;
                color:#ccc;

            }
 
            html{
                height: 100%;
                min-height: 100%;
            }
 
            body{
                height: inherit;
                min-height: 100%;
                width: 100%;
            }
 
            #div-contenedor{

                margin: auto auto;
                min-height: 100%;
            }
 
            #div-info-content{

                padding: 20px 20px 160px 20px;
                overflow: hidden;
            }
 
            #div-footer{

                margin-top: -20px;
                height: 20px;
            }
        </style>
    </head>
    <body>
        <div id="div-contenedor">
            <header>
                <p>este es el header</p>
            </header>
            <div id="div-info-content">
                <!-- ACA VA EL CODIGO HTML DE LA PÁGINA-->
            </div>
        </div>
        <div id="div-footer">
            <footer>
                <p>este es el footer</p>
            </footer>
        </div>
    </body>
</html>

Con este código no vas a tener problemas con las resoluciones de las pantallas, y el footer siempre te va a quedar abajo de la pantalla.

Work.fw



Saludos.-
Maycoll Bennett
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar