Foros del Web » Creando para Internet » CSS »

[Consulta] estirar contenedores en todas las resoluciones

Estas en el tema de [Consulta] estirar contenedores en todas las resoluciones en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 12/12/2009, 00:36
Avatar de Hiruma-Sama  
Fecha de Ingreso: agosto-2007
Ubicación: Floresta, Buenos Aires, Argentina.
Mensajes: 234
Antigüedad: 10 años, 3 meses
Puntos: 5
Pregunta [Consulta] estirar contenedores en todas las resoluciones

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;
  
padding1%;
  
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
  #2 (permalink)  
Antiguo 12/12/2009, 02:38
 
Fecha de Ingreso: noviembre-2009
Ubicación: Colombía
Mensajes: 311
Antigüedad: 8 años
Puntos: 17
Respuesta: [Consulta] estirar contenedores en todas las resoluciones

css:

Cita:
#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:

Cita:
<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.
  #3 (permalink)  
Antiguo 12/12/2009, 03:16
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: [Consulta] estirar contenedores en todas las resoluciones

Hola:

En la página de Mikmoro tienes este ejemplo.

Saludos.

  #4 (permalink)  
Antiguo 12/12/2009, 15:22
Avatar de Hiruma-Sama  
Fecha de Ingreso: agosto-2007
Ubicación: Floresta, Buenos Aires, Argentina.
Mensajes: 234
Antigüedad: 10 años, 3 meses
Puntos: 5
Respuesta: [Consulta] estirar contenedores en todas las resoluciones

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

Saludos.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 06:39.