altura 100%

xlos_mas_pro · #1 (**permalink**) 01/02/2012, 22:07

Hola bueno antes que todo el mundo me critique por que el tema ya esta bueno este es diferente lo que pasa es que ya me e cansado de buscar como puedo tener dos columnas con altura 100% y que al mismo tiempo sean auto y lo otro es que tengan un footer o pie de pagina que siempre permanezca abajo no abajo de las columnas si no de todo tiene que estar apegado al borde inferior de la pantalla.

Pido ayuda ya que todo el material que encuentro nunca puedo hacer que las dos cosas funcionen simpre o tengo las dos columnas con altura 100% pero el pie de pagina se levanta o es al revez por favor pido que alguien me muestre el codigo con las dos cosas funcionando por favor me seria de gran ayuda

emprear · #2 (**permalink**) 01/02/2012, 23: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 originalCopiar<!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