Lecciones Prácticas

« Compass (II): Grid de 24 columnas listo para trabajar

Linux: Sustitución de texto en múltiples ficheros usando SED [resuelto] »

Compass (III): Sticky footer how to [SOLVED] [RESUELTO]

November 30th, 2011 |

Author: Miguel

Llevo unos posts hablando sobre Compass y me preguntaban vía mail cómo conseguir un sticky footer mediante este sistema.

Bueno, me preguntaban cómo hacer que la altura de la página fuera 100%. Pero vamos, es lo mismo y se hace del mismo modo que se hace siempre: div para wrapper, div para content y el footer fuera. Pero veámoslo con un ejemplo:

<!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" />
<link href="./stylesheets/grid.css" media="screen, projection" rel="stylesheet" type="text/css" />
<link href="./stylesheets/text.css" media="screen, projection" rel="stylesheet" type="text/css" />
<title>Compass 24 column grid tutorial by Miguel Martín</title>
</head>
<body>
	<div id="wrapper">
	   <div id="content" class="container_24">  
        	<div id="header">
        		<p>This is the header</p>
        	</div>
        	<div id="left-sidebar">
        		<p>This is left</p>
        	</div>
        	<div id="main-content">
        		<p>This is main content</p>
        	</div>
        	<div id="right-sidebar">
        		<p>This is right</p>
    		</div>
       </div> <!-- content -->
    </div> <!-- /wrapper -->
 
    <div id="footer">
        <p>This is footer</p>
    </div>
</body>
</html>

Y el grid.scss para 24 columnas sería

/* Tutorial Compass (III) - sticky footer resuelto
 * Autor: Miguel Martin (miguelm[at]unizar[dot]es)
 * Más detalles: www.leccionespracticas.com
 */
 
@import "compass/reset";
@import "960/grid";  
 
$ninesixty-columns: 24;
$ninesixty-gutter-width: 10px;
 
.container_24 {
  @include grid-container;
 
  background-image: url(../img/24_col.gif);
  background-color: #fff;
  background-repeat: repeat-y;
 
  #header {
    @include grid(24); 
  }
 
  #left-sidebar{
  	@include grid(4);
  }
 
  #right-sidebar {
    @include grid(4); 
  }
 
  #main-content {
    @include grid(16);
  } 
 
}
 
#footer {
    position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear: both;
	background: #FFF;
	margin-bottom: 0px;
	padding:0px;
} 
 
 
 
/* General CSS settings */
body {
  background: #123;
  color: #333;
  font-size: 11px;
}
 
 
html, body, #wrapper {height: 100%;}
 
body > #wrapper { height: auto; min-height: 100%; }
 
#content { overflow: auto; padding-bottom: 150px; } 
 
a {
  color: #fff;
  text-decoration: none;
}
 
a:hover {
  text-decoration: underline;
}
 
h1 {
  font-family: Georgia, serif;
  font-weight: normal;
  padding-top: 20px;
  text-align: center;
  background: #FFF;
}
 
h2 {
  padding-top: 20px;
  text-align: center;
}
 
p {
  border: 1px solid #666;
  overflow: hidden;
  padding: 10px 0;
  text-align: center;
}
 
/* `Clear Floated Elements
----------------------------------------------------------------------------------------------------*/
.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}
 
 
.clearfix:before,
.clearfix:after,
.container_24:before,
.container_24:after {
  content: '.';
  display: block;
  overflow: hidden;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
  width: 0;
  height: 0;
}
 
.clearfix:after,
.container_24:after {
  clear: both;
}
 
/*
  The following zoom:1 rule is specifically for IE6 + IE7.
  Move to separate stylesheet if invalid CSS is a problem.
*/
 
.clearfix,
.container_24 {
  zoom: 1;
}

Y el resultado:

One Response to “Compass (III): Sticky footer how to [SOLVED] [RESUELTO]”

Lecciones Prácticas

Compass (III): Sticky footer how to [SOLVED] [RESUELTO]

One Response to “Compass (III): Sticky footer how to [SOLVED] [RESUELTO]”

Leave a Reply