Foros del Web - Ver Mensaje Individual

emprear · #2 (**permalink**) 02/02/2012, 00:58

Y si, es un tema viejo. Y la forma en que lo planteas merece algunas precisiones.

las columnas al 100%, pero que ademas sean auto?
supongo que lo que querés con auto es que si las columnas tiene más contenido y generan scroll en el body, se extiendan en lo alto con el mismo, eso haría que el pie (que obviamente va a estar debajo de las columnas) no apareciese al cargarse la página. Pero que sucedería si tus colunas no tiene contenido suficiente para generar scroll? lo lógico sería ques estas columnas NO tengan el 100%, sino que tengan el 100% menos el alto que tiene el pie. Con lo cual el pie estaría visible al cargar la página. Y a todo esto, tu pie, tiene un contenido fijo, o también puede variar?
Bueno, hay una solución que contempla todas esas posibilidades.

Código HTML:

Ver original<!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>
<title>columnas de igual alto</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<style type="text/css">
/*<![CDATA[*/
html, body{
height: 100%;
}
 
body,div {
margin: 0; border; none; padding: 0;
}
 
div.tabla{
display: table;
height: 90%;
border-collapse:collapse;
margin: 0 auto;
}
 
div.fila {
display: table-row;
}
 
div.tabla_pie {
display: table;
width: 100%;
height: 10%;
}
 
.colizquierda{
width: 300px;
height: 100%;
background-color:#478B14;
display: table-cell;
}
.colderecha{
width: 300px;
height: 100%;
background-color:#9F009F;
display: table-cell;
 
}
.pie{
width: 100%;
background-color:#808040;
display: table-cell;
}
 
/*]]>*/
</style>
</head>
<body>
<div class="tabla">
<div class="fila">
<div class="colizquierda">
    
<p>vvv</p>
<p>vvv</p>  
<p>vvv</p>  
<p>vvv</p>  
<p>vvv</p>  
<p>vvv</p>  
<p>vvv</p>  
<p>vvv</p>  
<p>vvv</p>  
<p>vvv</p>  
<p>vvv</p>
<p>vvv</p>  
<p>vvv</p>  
<p>vvv</p>  
<p>vvv</p>  
<p>vvv</p>  
<p>vvv</p>  
<p>vvv</p>  
<p>vvv</p>  
<p>vvv</p>  
<p>vvv</p>
<p>vvv</p>  
<p>vvv</p>  
<p>vvv</p>  
<p>vvv</p>  
<p>vvv</p>  
<p>vvv</p>  
<p>vvv</p>  
<p>vvv</p>  
<p>vvv</p>  
 
</div>
<div class="colderecha">s</div>
 
</div>
</div>
 
 
<div class="tabla_pie">
    
<div class="pie">
<p>pie</p>      
<p>pie</p>  
<p>pie</p>  
<p>pie</p>  
</div>
    
</div>
 
</body>
</html>

la idea es usar las propiedades display: table, table-row y table-cell, y que la suma de la div que contiene las columnas y la que contiene el pie, sumen el 100%.
Primero siempre fijate que porcentaje necesita el pie (tabla.pie)para ser visible en el caso de que las columnas no tengan suficiente contenido, y el resto se lo das al div.tabla.
Después proba de quitarle o agregarle contenido a las columnas
funciona en ie8+ y en el resto, en todos
Saludos