[CSS] Capa 100% de altura

mOrK2

Buenas.

Acabando de hacer una web, me ha surgido un problema, y esque, si no hay suficiente contenido como para que llegue hasta abajo del todo, pues queda cortado y mal, pongo una imagen...:

spoiler

He probado con height="100%" y no va, he googleado, pero no sé porqué puede ser.

Saludos y gracias!

B

El height 100% es un tema chungo en css, dificilmente solucionable, al final solo te quedará solucionarlo con algún hack CSS como:

http://www.webmasterworld.com/forum83/200.htm

Si es un diseño sencillo, lo que yo he hecho muchas veces para apañarmelas es poner como background del body repitiendose todo el rato en el eje-y, algo así en tu caso:

Depende de lo complejo que sea el diseño puede valer o no...

Saludos ^^

mOrK2

Pues podría valerme eso que comentas, no es muy compleja la web...

Aunque estoy abierto a otras posibilidades :P

Gracias!

Survivor

yo acabo de probar esto en ie , firefox y safari y va

<html>
<head>
<style>
body{
	margin:0px;
}
#main{
	background-color:#333;
	top:0px;
	down:0px;
	height:100%;
	width:400px;
	margin:0 auto;
}

</style>
</head>
<body>
<div id="main">
asd
</div>
</body>
</html>

espero que te sirva

Crawler

respondiendo a #4

prueba añadiendo mucho contenido a tu codigo:

<html>
<head>
<style>
body{
margin:0px;
}
#main{
background-color:#333;
top:0px;
down:0px;
height:100%;
width:400px;
margin:0 auto;
}
#
</style>
</head>
<body>
<div id="main">
asd <-br><-br><-br><-br><-br><-br><-br><-br><-br><-br><-br>
asd <-br><-br><-br><-br><-br><-br><-br><-br><-br><-br><-br>
asd <-br><-br><-br><-br><-br><-br><-br><-br><-br><-br><-br>
asd <-br><-br><-br><-br><-br><-br><-br><-br><-br><-br><-br>
asd <-br><-br><-br><-br><-br><-br><-br><-br><-br><-br><-br>
asd <-br><-br><-br><-br><-br><-br><-br><-br><-br><-br><-br>
asd <-br><-br><-br><-br><-br><-br><-br><-br><-br><-br><-br>

</div>
</body>
</html> 

en firefox o en safari :S (los <-br> son saltos de linea normales, que si no no me los coje el foro)

Si el contenido es mas grande que el alto disponible del explorador (sin scroll) peta.

De todos modos, googleando hay bastante información de como arreglarlo, por ejemplo:
http://www.themaninblue.com/experiment/footerStickAlt/

mOrK2

Gracias por las respuestas.

He encontrado (gracias a #5) este tutorial que me sirve :P

Gracias a todos!

Crawler

espero que hayas entendido lo que pone en esa pagina nada mas cargar:

This technique is obsolete now that there is a more compatible and less buggy version… footerStickAlt.

(esta tecnica está obsoleta, pero existe una versión mas compatible y con menos errores... footerStickAlt)

y hayas usado footerStickAlt en vez de footerStick ;)

Usuarios habituales