heigh:100% ???

Valerr · #1 (**permalink**) 04/03/2010, 09:34

Hola, tengo el siguiente problema:
Mi página web tiene tres columnas dentro de un cuerpo: la izquierda tiene el menú, la del medio el contenido y la derecha otros datos. Según la opción del menú, la más larga es la del medio o la derecha.

El pie de página debería ir al final, pero me lo muestra al final de la columna central, sin importar si alguna de las otras es más larga. Lo muestra en todo el ancho pero se superpone en las columnas laterales. A mi entender no está interpretando el height: 100% del cuerpo.

En el CSS tengo:

.encabezado {
height:140px;
vertical-align:top; }

.cuerpo {
height: 100%; }

.col_menu {
position: absolute;
left:10px;
top:150px;
width:165px; }

.col_central {
margin-left: 160px;
margin-right: 310px; }

.col_der {
position: absolute;
right:10px;
top:150px;
width:300px; }

.fin_page {
left: 0px;
bottom: 0px;
width: 100%;
}
.cuerpo {
height: 100%; }

En el PHP tengo:

<body>

<div class="encabezado">
</div> 

<div class="cuerpo">

<div class="col_menu">
</div> 

<div class="col_central">
</div> 

<div class="col_der">
</div> 

</div> 

<div class="fin_page" >
</div> 

</body>

¿Alguna sugerencia?

Muchas gracias!

cristian_cena · #2 (**permalink**) 04/03/2010, 12:02

Prueba con position:relative; en vez de asolute para mantener tus elementos en el flujo normal del documento. Aunque, para esta tarea, mejor aún te irá flotando los divs. Si lo haces recuerda de dar overflow:hidden; al padre de los elementos flotados. Lo que se conoce como limpiar los float.

Saludos!

Valerr · #3 (**permalink**) 08/03/2010, 06:10

Muchas gracias por la respuesta!!!
En realidad necesito position: absolute porque quiero que que las columnas laterales queden bajo el encabezdo más allá del largo de la columna central.
Miré varios artículos sobre float pero sigo con el mismo problema y lo que no entiendo es por qué el cuerpo toma siempre el largo de la columna central, sin importar las laterales.
Saludos!

cristian_cena · #4 (**permalink**) 08/03/2010, 06:36

Cita:

Iniciado por Valerr

... lo que no entiendo es por qué el cuerpo toma siempre el largo de la columna central, sin importar las laterales.

Porque al darle position:absolute; a "col_menu" y a "col_der" tu le dices a "cuerpo" que ignore los height de "col_menu" y "col_central" y tome la altura de "col_central".

En realidad que ignore la posición de "col_menu" y "col_der", pues estos elementos desde el momento en que colocaste position:absolute; han dejado de depender de la posición de "cuerpo" para tomar una posición dependiente del eje de coordenadas x/y cuyo 0,0 se encuentra en la esquina sup-izq de la pantalla. Puedes controlar esta nueva posición (absoluta) con las propiedades:

top:/*ej: 100px*/;
left:/*20em*/;
right:/*5%*/;
bottom:/*0*/;

Este capitulo me sirvió para introducirme en el tema, espero te sirva a ti también, saludos!

Valerr · #5 (**permalink**) 18/03/2010, 08:04

Genial! Me ayudó mucho el artículo que me recomendaste. Muchas gracias.
Ahora tengo el siguente problema: Los dos divs que forman las columnas derecha e izquierda y que son de tamaño fijo quedaron perfectas. Pero la central no quiero hacerla fija sino que varíe según el tamaño del monitor y la resolución del usuario. Sería algo como width = 100% - 450px. ¿Tengo que hacer una función en javascript o hay alguna otra forma? En caso de ser una función, de dónde puedo sacarla?
Muchas gracias!!!

flpms · #6 (**permalink**) 18/03/2010, 08:51

Usted puede hacer lo seguinte. Utilizar-se de la propiedade Flot del CSS.

Float hace los elementos DIVS quedar-se como cajas.

Uno ejemplo:

Código CSS:

Ver original#header{
float:left;
}
 
#left{
clear:both;
float:left;
}
 
#center{
float:left;
width:60&#37;;
}
 
#right{
float:right;
}

Esto hace que los DIVS(uno Box Element) hagan como em juego Tetris. este puede hacer los testes, pero es mejor que vós busque uno poco más de informaciones.