[SOLUCIONADO] Situar el footer SIEMPRE al final de la página

Trueno2104 · #1 (**permalink**) 05/06/2013, 09:06

Buenas,

Resulta que después de mucho probar y consultar no doy con la solución de lo que quiero hacer, sí que he encontrado información relacionada, pero al aplicarlo a mi CSS no veo que funcione.

Lo que quiero hacer es que el footer se sitúe siempre al final de la página, si tiene poca altura la página que esté en el borde de la pantalla del navegador y si tiene mucha que no se vea hasta hacer scroll hasta abajo del todo.

Dicho ésto pongo código por encima a ver si alguien puede echarme una mano:

HTML

Código:

<!DOCTYPE html>
<html>
	<head></head>
	<body>
		<div id="header-top"></div>
		<div id="content">
			<div id="search-content">
			</div>
			<div id="lateral">
				<div id="favorites"></div>
				<div id="lateral-publi"></div>
			</div>
		</div>
		<div id="footer"></div>
	</body>
</html>

La distribución es una barra superior fija que se mueve al hacer scroll, el contenido que son 2 columnas, y el pie que quiero se quede siempre fijo abajo del todo.

CSS

Código:

#header-top {
	height: 40px;
	width: 100%;
	position: fixed;
	z-index: 1;
	background: #6ec5ff;
	border-bottom: 3px solid #0099ff;
}
#content {
	width: 1180px;
	min-height: 100%;
	margin: auto;
	position: relative;
	padding: 20px; 
	padding-top: 50px;
	padding-bottom: -202px;
	padding-right: 50px;
}
#footer {
	width: 100%;
	height: 200px;
	background: #333;
	border-top: 2px solid #000;
	position: absolute;
	bottom: 0;
}

Creo que lo que pasa es que la caja del contenido no crece con lo que hay en su interior, y no empuja.

Ahora mismo el footer está colocado debajo, porque el contenido no ocupa suficiente para haber scroll, pero si añado contenido aparece el scroll pero el footer no se mueve, si bajo por la página en footer se queda en la posición que estaba, es decir, en el medio del contenido.

A ver si alguien ve algo.

Gracias.

herzbazi · #2 (**permalink**) 05/06/2013, 09:18

prueba agregando position:relative;

iEnrique · #3 (**permalink**) 05/06/2013, 09:22

De todas formas añade las etiquetas de HTML5 "<footer></footer>" y así el navegador que lo interpreta sabrá de lo que hablas...

refielt · #4 (**permalink**) 05/06/2013, 09:32

en realidad no es muy dificil, pero tu html esta mal casi en su totalidad, el modo correcto seria el siguiente.

Código CSS:

Ver originalbody,html{ height:100%; margin:0;}
    
#conteiner{min-height:100%; }
 
#content {
    width: 800px;
    margin:0 auto;
    position: relative;
    background: #CCC;
    margin-bottom:202px;
}
    
    
#header-top {
    height: 40px;
    width: auto;
    background: #6ec5ff;
    border-bottom: 3px solid #0099ff;
}
 
#footer {
    width: auto;
    height: 200px;
    
    margin-top:-200px;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    background: #333;
    border-top: 2px solid #000;
 
}

Código HTML:

Ver original<div id="conteiner">
        
            <div id="content">
                <div id="header-top"></div>
                <div id="search-content">
                contenidooooo
                </div>
                <div id="lateral">
                    <div id="favorites"></div>
                    <div id="lateral-publi"></div>
                </div>
            </div> 
            
        </div>
        <div id="footer"></div>

Trueno2104 · #5 (**permalink**) 05/06/2013, 10:06

Cita:

Iniciado por herzbazi

prueba agregando position:relative;

Con eso conseguiría que estuviera siempre abajo, pero entonces si hay mucho contenido sería como ahora, que me lo tapa...

Que me siga siempre, sólo el menú superior.

Cita:

Iniciado por iEnrique

De todas formas añade las etiquetas de HTML5 "<footer></footer>" y así el navegador que lo interpreta sabrá de lo que hablas...

Aunque no vaya a mejorar nada, hecho, por si acaso ;)

Cita:

Iniciado por refielt

en realidad no es muy dificil, pero tu html esta mal casi en su totalidad, el modo correcto seria el siguiente.

Código CSS:

Ver originalbody,html{ height:100%; margin:0;}
    
#conteiner{min-height:100%; }
 
#content {
    width: 800px;
    margin:0 auto;
    position: relative;
    background: #CCC;
    margin-bottom:202px;
}
    
    
#header-top {
    height: 40px;
    width: auto;
    background: #6ec5ff;
    border-bottom: 3px solid #0099ff;
}
 
#footer {
    width: auto;
    height: 200px;
    
    margin-top:-200px;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    background: #333;
    border-top: 2px solid #000;
 
}

Código HTML:

Ver original<div id="conteiner">
        
            <div id="content">
                <div id="header-top"></div>
                <div id="search-content">
                contenidooooo
                </div>
                <div id="lateral">
                    <div id="favorites"></div>
                    <div id="lateral-publi"></div>
                </div>
            </div> 
            
        </div>
        <div id="footer"></div>

No he entendido casi nada de lo que has puesto. Porque me cuesta identificar el porqué de los cambios.

¿Por qué iba a utilizar width: auto si quiero uno que ocupe todo el ancho del navegador? ¿La capa "container" cierra antes o después del footer?

¿La propiedad box-sizing para qué es?

Gracias.

refielt · #6 (**permalink**) 05/06/2013, 10:17

simplemente lo puse para que tengas problemas mas adelante cuando quieras estilizar.

width:auto es solo para reemplazar tu width:100%, si lo que quieres es ocupar el 100% de, no es necesario colocar nada, ya que los bloques (divs) por defecto ocupan ese espacio, si defines 100%; luego podrias tener problemas con los paddings y bordes ya que estos ocuparan mas del espacio definido como 100%, si quieres usar 100% te aconsejo que uses border-box, que es para que tu objeto ocupe la dimecion real definida con el css.

el conteriner es necesario por que necesitas un obtejo padre que "empuje" siempre al footer abajo, se podria usar tu propio "content" pero tendrias problemas a la hora de darle estilo. por eso se aconseja usar un div englobador.

refielt · #7 (**permalink**) 05/06/2013, 10:18

el box sizing del footer es para obiar tus 2 px de borde, tambien podria no ponerlo pero luego al lo tendria que poner margin-top:-202px; es lo mismo.

herzbazi · #8 (**permalink**) 05/06/2013, 10:25

una pregunta
que es lo que quieres
que el footer este siempre visible y que el cont. aparezca con con scroll

pzin · #9 (**permalink**) 05/06/2013, 10:25

Cita:

Iniciado por Trueno2104

No he entendido casi nada de lo que has puesto. Porque me cuesta identificar el porqué de los cambios.

¿Por qué iba a utilizar width: auto si quiero uno que ocupe todo el ancho del navegador? ¿La capa "container" cierra antes o después del footer?

¿La propiedad box-sizing para qué es?

Gracias.

La explicación la puedes encontrar por aquí: http://www.cssstickyfooter.com/

Cita:

Iniciado por Trueno2104

¿La propiedad box-sizing para qué es?

Cambia el modelo de caja de CSS. Lo que hace es que el ancho que indiques en width sea el ancho real que va a tener el elemento. El modelo de caja por defecto, añade border y padding al ancho. Es una forma de trabajar más cómodamente —aunque cuando salió IE6 todos echábamos pestes del modelo de caja de Microsoft, que hoy en día es muy común usar. Para una mejor compatibilidad, yo lo pondría así:

Código CSS:

Ver originalbox-sizing: border-box;
-moz-box-sizing: border-box;

Porque Firefox no soporta la forma nativa de CSS: http://caniuse.com/css3-boxsizing

Trueno2104 · #10 (**permalink**) 06/06/2013, 07:06

Gracias por la explicación de la propiedad box-sizing, me la apunto, que me irá bien ;)

Sobre lo de situarlo abajo del todo, no veo nada claro para resolverlo, he ido probando y probando y nada.

Gracias.

Cita:

Iniciado por herzbazi

una pregunta
que es lo que quieres
que el footer este siempre visible y que el cont. aparezca con con scroll

No, quiero que siempre esté debajo del todo, pero no siempre visible; es decir, que si hay poco contenido esté abajo del todo de la ventana del navegador, pero si hay mucho no se vea hasta hacer scroll hacia abajo (como en cualquier página).

Trueno2104 · #11 (**permalink**) 10/06/2013, 10:13

¿Una ayuda por favor?

pzin · #12 (**permalink**) 10/06/2013, 13:26

¿Usaste el código que aparece en la página que enlacé en #9?

Trueno2104 · #13 (**permalink**) 20/06/2013, 08:55

Cita:

Iniciado por pzin

¿Usaste el código que aparece en la página que enlacé en [URL="http://www.forosdelweb.com/f53/situar-footer-siempre-final-pagina-1055757/#post4444348"]#9[/URL]?

Buenas,

Disculpa, que he tenido unos días bastante ocupados.
Con el enlace que me pasaste perfecto, después de pelearme un poco acabé consiguiéndolo.

Muchas gracias ;)