Foros del Web » Creando para Internet » CSS »

¿ Columna 100% height ?

Estas en el tema de ¿ Columna 100% height ? en el foro de CSS en Foros del Web. Pues mi pregunta sería como hago para que una de las tres columnas de mi web tenga un height al 100 % Para que les ...
  #1 (permalink)  
Antiguo 29/11/2009, 15:00
 
Fecha de Ingreso: junio-2009
Mensajes: 38
Antigüedad: 8 años, 5 meses
Puntos: 0
¿ Columna 100% height ?

Pues mi pregunta sería como hago para que una de las tres columnas de mi web tenga un height al 100 %

Para que les sirva de ayuda, tengo una web con tres columnas, pie de pagina siempre abajo y quiero que llege la columna hasta el pie...

Les agradecería si pudieran ayudarme. Gracias por adelantado.
  #2 (permalink)  
Antiguo 29/11/2009, 15:24
 
Fecha de Ingreso: noviembre-2009
Ubicación: Colombía
Mensajes: 311
Antigüedad: 8 años
Puntos: 17
Respuesta: ¿ Columna 100% height ?

Sabés CSS?

Te explicare.. Si usas:

Cita:
#div{
height:100%;
}
No funcionara ya qué no toma todo el alto de pantalla... ¿Por qué? por qué el alto esta adecuado al contenido que ahi en ella...

Puedes hacer llegar esa div hasta el footer haciendo lo siguiente:

Cita:
<br />
Son saltos de lineas.. y así llegas hasta abajo ;)

Saludos.
  #3 (permalink)  
Antiguo 29/11/2009, 15:42
 
Fecha de Ingreso: junio-2009
Mensajes: 38
Antigüedad: 8 años, 5 meses
Puntos: 0
Respuesta: ¿ Columna 100% height ?

Ya lo había pensado pero al poner "br" relleno espacio, ¿pero cuantos pongo?, dependiendo de la resolución de pantalla del monitor y del navegador aparecerá o no una barra de desplazamiento.

¿Alguna idea?
  #4 (permalink)  
Antiguo 29/11/2009, 17:35
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 8 años, 7 meses
Puntos: 44
Respuesta: ¿ Columna 100% height ?

Hola Angelde93

No utilices saltos de línea (<br />) para conseguir eso (es muy chapucero y además no es posible). Pon tu código y así te podremos ayudar.

Bye
  #5 (permalink)  
Antiguo 30/11/2009, 08:57
 
Fecha de Ingreso: junio-2009
Mensajes: 38
Antigüedad: 8 años, 5 meses
Puntos: 0
Respuesta: ¿ Columna 100% height ?

Sí, eso pense yo.

Bueno, aquí esta el código, en orden, el PHP y luego el CSS.

Código:
<body>

<div id="wrap">
    <div id="principal" class="clearfix">
       <div class="encabezado">Encabezado</div>
       <div class="izquierda">Columna izquierda</div>
       <div class="derecha">Columna derecha</div>
       <div class="central">Columna Central</div>
    </div>
</div>

<div id="footer">Pie</div>

</body>
Código:
* {
	margin:0 auto;
	padding:0;
}
html, body{
	width:974px;
	font:11px Verdana, Arial, Helvetica, sans-serif;
	background-image:url(fondo.jpg);
	background-attachment:fixed;
	background-position:top center;
	background-repeat:no-repeat;
	height: 100%;
}
body > #wrap {	
	width:972px;
	border-left:1px solid #023f4c;
	border-right:1px solid #023f4c;
	margin:0;
	height: auto;
	min-height: 100%;
}
#principal {
	margin:0 auto;
	padding-bottom: 51px;
}
.encabezado{
	width:972px;
	height:150px;
}
.izquierda{
	width:141px;
	float:left;
	min-height:100%;
	height:100%;
}
.derecha{
	width:141px;
	float:right;
	min-height:100%;
	height:100%;
}
.central{
	width:500px;
	background-color:#FFF;
	min-height:100%;
	height:100%;
}
#footer {
	width:972px;
	position: relative;
	margin-top: -51px;
	height: 51px;
	background-image:url(foot.jpg);
	clear:both;
}
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {
	display: inline-block;
}
* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;
}
  #6 (permalink)  
Antiguo 30/11/2009, 09:22
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 9 años, 3 meses
Puntos: 20
Respuesta: ¿ Columna 100% height ?

Mira, te paso tres ejemplos de San Mikmoro, para que te orientes.

http://www.araudi.net/ejemplos/colum...ilibradas.html
http://www.araudi.net/ejemplos/conjunta.html
http://www.araudi.net/ejemplos/3columnas.html

Saludos¡¡
  #7 (permalink)  
Antiguo 30/11/2009, 13:12
 
Fecha de Ingreso: junio-2009
Mensajes: 38
Antigüedad: 8 años, 5 meses
Puntos: 0
Respuesta: ¿ Columna 100% height ?

El último ejemplo es justamente lo que quiero.

Voy a probarlo en mi web y si consigo hacerlo funcionar lo aviso.

Muchas gracias.
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 09:38.