Lecciones Prácticas

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

CDS Invenio: avoid duplicate content on comments and other record tabs »

Compass (IV): 100% height using 960.gs grid [SOLVED]

December 1st, 2011 |

Author: Miguel

Ayer os comenté la forma de conseguir un sticky footer usando el grid 960.gs en Compass

Sin embargo el ejemplo de ayer no completaba la altura del div de contenido (#content) hasta el footer:

El ejemplo de hoy es muy similar, pero el contenido se extiende hasta alcanzar el footer (height 100% del elemento contenedor):

Fichero de marcado:

<!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="wrapper2">
	    <div id="segundo" 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> <!-- /segundo -->
    </div> <!-- /wrapper2 -->
 
    <div id="footer">
        	<p>This is footer</p>
    </div>
</body>
</html>

Fichero grid.scss (de estilo):

 
/* Tutorial Compass (IV) 
 * 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;
 
  min-height: 100%;
 
  #header {
    @include grid(24); 
  }
 
  #left-sidebar{
  	@include grid(4);
  }
 
  #right-sidebar {
    @include grid(4); 
  }
 
  #main-content {
    @include grid(16);
  } 
 
}
 
#footer {
    position: relative;
    margin-top: -50px; /* negative value of footer height */
    height: 50px;
    clear: both;
	background: #FFF;
	margin-bottom: 0px;
	padding:0px;
	width: 960px;
	margin-left: auto;
	margin-right:auto;
 
	p{
		padding: 5px;
		border: 0px;
		margin: 0px;
	}
} 
 
/* ---- con wrapper2 consigo height 100% en el contenedor de contenido ------ */
#wrapper2{
	height:100%;
	margin-bottom: -50px;
	background:#333;
	width:960px;
	margin-left:auto;
	margin-right:auto;
}
/* --------------------------------------------------------- */
 
/* 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: 50px; } 
 
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;
}

Utilizando estos dos ejemplos como base se puede realizar de forma muy simple cualquier layout sobre un grid de anchura fija de 960px.

En próximos capítulos veremos las desventajas de utilizar grids de ancho fijo ahora que los tablets, móviles y demás aparatos de resoluciones dispares están conquistando el mercado.

Lecciones Prácticas

Compass (IV): 100% height using 960.gs grid [SOLVED]

Leave a Reply