[Consulta] estirar contenedores en todas las resoluciones

[Hiruma-Sama]

Buenas muchachos, tengo una consulta, sobre una paginita, empece a practicar un poco css, y mas que nada, queria hacer una web para un desarrollo propio, para practicar cosas en php y mysql, pero queria que tenga un aspecto lindo, y me puse a practicar css, consegui esto:

Imagen que Muestra como queda la Web

Ahora bien, mi problema es el siguiente, donde estan las Columna 1 y Columna 2, no se como hacer para que ocupen siempre el mismo alto en la pagina, es decir, supongamos que yo tengo una resolucion de 1024*768 o de 800*600 o de 1400*900 yo quiero que en todas, la columna 1 y columna 2 se "estiren" para abajo lo que sea necesario, yo ahi en la imagen, se ve que lo consegui para esa resolucion, pero le puse un valor fijo height:398px; y supongo que en otras resoluciones obtendre otros resultados, y yo quiero que en todas las resoluciones sea vea tal cual la imagen. PD. probe poniendo Porcentajes, pero no consegui el resultado esperado.

Dejo el codigo para que si alguien anda mas empapado que yo, puede darme una ideita de como solucionarlo ^^

Código PHP:

  * {
  margin:0px;
  padding:0px;
}
#contenedor
{
  position:absolute;    
  width:98%;
  margin:0px;
  padding: 1%;
  line-height:130%;
  background-color:#ffffff; 
}
#cabecera
{
  height:98%;
  padding:30px;
  color:#fff;
  border:1px solid #000;
  background-color:#becdfe;
  clear:left;
}
#columna1
{
  background-color:#f2f2f2; 
  float:left;
  width:10%;
  border-left:1px solid #000;
  border-right:1px solid #aaa;
  margin:0;
  padding:1em;
  height:398px;
}
#columna2
{
  background-color:#f2f2f2; 
  margin-left:134px;
  border-right:1px solid #000;
  padding:1em;
  height:398px;
}
#pie {
  padding:10px;
  color:#fff;
  border:1px solid #000;
  background-color:#becdfe;
  clear:left; 
   

[PrendekZ]

css:

#contenedor{
position:absolute;
width:94%;
margin:0px;
padding: 1%;
line-height:130%;
background-color:#ffffff;
}
#header{
height:98%;
padding:30px;
color:#fff;
border:1px solid #000;
background-color:#becdfe;
clear:left;
}
#columna_left{
background-color:#f2f2f2;
float:left;
width:10%;
border-left:1px solid #000;
border-right:1px solid #aaa;
margin:0;
padding:1em;
height:398px;
}
#columna_right{
background-color:#f2f2f2;
margin-left:134px;
border-right:1px solid #000;
padding:1em;
height:398px;
float:right;
}
#footer{
padding:10px;
color:#fff;
border:1px solid #000;
background-color:#becdfe;
clear:both;
}

html:

<div id="contenedor">
<div id="header"></div>
<div id="column_left"></div>
<div id="column_right"></div>
<div id="footer"></div>

Listo, ahi te debé funcionar.. pero para que usar por porcentaje sin sabér primero usar los pixeles?

Saludos.

[jomaruro]

Hola:

En la página de Mikmoro tienes este ejemplo.

Saludos.

[Hiruma-Sama]

ah muchas gracias, la verdad que ahora me pongo a practicar y retocar el codigo.

Saludos.