Es posible hacer esto?

Darwinformatico · #1 (**permalink**) 05/09/2008, 07:56

Es posible establecer un div al borde inferior de la pantalla sin importar la resolucion de la misma?

Es decir que este div no se mueva y siempre quede al final de la pagina sin importar la resolucion...

rene-silva · #2 (**permalink**) 05/09/2008, 08:59

Si, si es posible. No recuerdo la página de donde obtuve el código pero acá a está a grandes rasgos. La clave es entender la propiedad position y bottom.

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>GNexis</title>
		<link href="css/main.css" rel="stylesheet" type="text/css"/>
		<style type="text/css">
			*{
				margin:0px;
				padding:0px;
			}
			html, body, #contents {
				min-height: 100%;
				width: 100%;
				height: 100%;
			}
			
			/*
			 * The "height" above is a hack for IE5+/Win.  Below we adjust
			 * it using the child selector to hide from IE5+/Win
			 */
			
			html>body, html>body #contents {
				height: auto;
			}
			
			/*
			 * Without this, Moz1.0 adds a vertical scrollbar
			 */
			
			body {
				font-family: sans-serif,Arial;
				font-size:12px;
				color:#fff;
				background:#1B1D1E;
			}
			
			#contents {
				position: absolute;
				top: 0;
			   left: 0;
				background:#333;
			/*  Use the following to center this at 50% width, or this for 750px: width: 700px, margin-left: -350px: */
			/*
				left: 50%;
			    width: 50%;
			    margin-left: -25%;
			*/
			}
			#content{
				background:#ffffff;
				color:#333;
			}
			#footer {
				position: absolute;
				bottom: 0;
				background:#123;
				width: 70%; /* See note below */
				text-align: center;
				padding: 1.5em 15%;
			}
			
			/* SBMH -- see http://css-discuss.incutio.com/?page=BoxModelHack 
			 * Stupid hack lets IE see 100%, others see 70%. 
			 */
			#footer {
			    \width: 100%;
			    w\idth: 70%;
			}
			#textFooter{
				padding-top:15px;
			}
		</style>
	</head>
	<body id="bodyHTML">
		<div id="contents">
	      <div id="main">
	      	<div id="content">
	      		asdf
	      	</div>
		      <div id="footer">
		      	<div id="textFooter">
		    	    <p>GNexis.com</p>
				</div>
	      </div>
	    </div>
	</body> 
</html>

Darwinformatico · #3 (**permalink**) 05/09/2008, 10:39

ya lo aplique y funciono perfecto muchas gracias por el dato :)