Foros del Web » Creando para Internet » CSS »

heigh:100% ???

Estas en el tema de heigh:100% ??? en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 04/03/2010, 09:34
 
Fecha de Ingreso: marzo-2010
Mensajes: 3
Antigüedad: 7 años, 9 meses
Puntos: 0
heigh:100% ???

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> <!--FIN encabezado-->

<div class="cuerpo">

<div class="col_menu">
</div> <!--FIN menu-->

<div class="col_central">
</div> <!--FIN col_central-->

<div class="col_der">
</div> <!--FIN col_der-->

</div> <!--FIN cuerpo-->

<div class="fin_page" >
</div> <!--FIN fin_page-->

</body>


¿Alguna sugerencia?

Muchas gracias!
  #2 (permalink)  
Antiguo 04/03/2010, 12:02
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: heigh:100% ???

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!
  #3 (permalink)  
Antiguo 08/03/2010, 06:10
 
Fecha de Ingreso: marzo-2010
Mensajes: 3
Antigüedad: 7 años, 9 meses
Puntos: 0
Respuesta: heigh:100% ???

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!
  #4 (permalink)  
Antiguo 08/03/2010, 06:36
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: heigh:100% ???

Cita:
Iniciado por Valerr Ver Mensaje
... 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!
  #5 (permalink)  
Antiguo 18/03/2010, 09:04
 
Fecha de Ingreso: marzo-2010
Mensajes: 3
Antigüedad: 7 años, 9 meses
Puntos: 0
Respuesta: heigh:100% ???

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!!!
  #6 (permalink)  
Antiguo 18/03/2010, 09:51
 
Fecha de Ingreso: marzo-2009
Ubicación: Santo André - São Paulo - Brasil
Mensajes: 91
Antigüedad: 8 años, 8 meses
Puntos: 1
Respuesta: heigh:100% ???

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
  1. #header{
  2. float:left;
  3. }
  4.  
  5. #left{
  6. clear:both;
  7. float:left;
  8. }
  9.  
  10. #center{
  11. float:left;
  12. width:60&#37;;
  13. }
  14.  
  15. #right{
  16. float:right;
  17. }

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.

Última edición por flpms; 18/03/2010 a las 09:52 Razón: Yo tenia me olvidado de poner la propiedade Both en ejemplo

Etiquetas: Ninguno
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 13:56.