¿ Columna 100% height ?

Angelde93 · #1 (**permalink**) 29/11/2009, 15:00

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.

PrendekZ · #2 (**permalink**) 29/11/2009, 15:24

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.

Angelde93 · #3 (**permalink**) 29/11/2009, 15:42

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?

deirdre · #4 (**permalink**) 29/11/2009, 17:35

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

Angelde93 · #5 (**permalink**) 30/11/2009, 08:57

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;
}

Impostor · #6 (**permalink**) 30/11/2009, 09:22

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¡¡

Angelde93 · #7 (**permalink**) 30/11/2009, 13:12

El último ejemplo es justamente lo que quiero.

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

Muchas gracias.