Foros del Web » Creando para Internet » CSS »

Problema con div (alturas)

Estas en el tema de Problema con div (alturas) en el foro de CSS en Foros del Web. Buenas Foreros tengo el siguiente problema que no se como puedo solucionarlo espero que puedan tirarme un par de ideas. El tema es el siguiente ...
  #1 (permalink)  
Antiguo 28/01/2010, 07:58
Avatar de cala932  
Fecha de Ingreso: septiembre-2006
Ubicación: San Juan-Argentina
Mensajes: 902
Antigüedad: 11 años, 2 meses
Puntos: 9
Problema con div (alturas)

Buenas Foreros tengo el siguiente problema que no se como puedo solucionarlo espero que puedan tirarme un par de ideas. El tema es el siguiente resulta que tengo el contenido de la web seccionado en tres columnas por ejemplo:
Código HTML:
<div id="columnaUno">
        contenido columna uno
     </div><!--end columna uno-->
<div id="columnaDos">
        contenido columna dos
     </div><!--end columna dos-->
<div id="columnaTres">
        contenido columna tres
     </div><!--end columna tres--> 
Cada div tiene un color de fondo distinto, el problema viene cuando el contenido de la columna dos crece mas que las otras, las alturas de las columnas uno y tres quedan mas cortas, la pregunta es de que manera se pueden igualar las alturas dinamicamente. Gracias de antemano.
Saludos
__________________
->Aprender es un proceso que incluye el error..
  #2 (permalink)  
Antiguo 28/01/2010, 08:00
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Problema con div (alturas)

Aquí te dejo unos enlaces que apuntan a tu problema. Yo utilizo el "método" de vectoralia.com

Saludos!
  #3 (permalink)  
Antiguo 28/01/2010, 08:09
Avatar de cala932  
Fecha de Ingreso: septiembre-2006
Ubicación: San Juan-Argentina
Mensajes: 902
Antigüedad: 11 años, 2 meses
Puntos: 9
Respuesta: Problema con div (alturas)

buenas cristian_cena muchas gracias por responder ahora reviso el enlace que me pasas y te cuento Saludos man.!!!
__________________
->Aprender es un proceso que incluye el error..
  #4 (permalink)  
Antiguo 29/01/2010, 06:42
Avatar de cala932  
Fecha de Ingreso: septiembre-2006
Ubicación: San Juan-Argentina
Mensajes: 902
Antigüedad: 11 años, 2 meses
Puntos: 9
Respuesta: Problema con div (alturas)

Holas aqui va otra manera de solucionar el problema mediante javascript, lo que hace es determinar cual es el div de mayor alto y en base a eso asignar esa altura al resto, lo dejo por si a alguien le sirve
Código HTML:
<script type="text/javascript">
    //values
    var c2_val = document.getElementById('columnaDos').offsetHeight;
    var c1_val = document.getElementById('columnaUno').offsetHeight;
    var c3_val = document.getElementById('columnaTres').offsetHeight;

    //id
    var c1_id = document.getElementById('columnaUno');
    var c2_id = document.getElementById('columnaDos');
    var c3_id = document.getElementById('columnaTres');

    var maximo = Math.max(c1_val,c2_val,c3_val);

    if(maximo == c1_val){
    document.write('<style> .columnaDos{ height:  '+maximo+'px; } </style>');
    document.write('<style> .columnaTres{ height:  '+maximo+'px; } </style>')
    }

    if(maximo == c2_val){
    document.write('<style> .columnaUno{ height:  '+maximo+'px; } </style>');
    document.write('<style> .columnaTres{ height:  '+maximo+'px; } </style>')
    }

    if(maximo == c3_val){
    document.write('<style> .columnaDos{ height:  '+maximo+'px; } </style>');
    document.write('<style> .columnaUno{ height:  '+maximo+'px; } </style>');
    }


</script> 
Saludos
__________________
->Aprender es un proceso que incluye el error..
  #5 (permalink)  
Antiguo 30/01/2010, 20:33
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Problema con div (alturas)

Che que bueno que compartas esa solución, ahora, es multibrowser?
  #6 (permalink)  
Antiguo 31/01/2010, 22:05
 
Fecha de Ingreso: mayo-2008
Ubicación: Santiago-Chile
Mensajes: 253
Antigüedad: 9 años, 7 meses
Puntos: 1
Respuesta: Problema con div (alturas)

y no seria mejor poner height con una altura fisica... así es más simple y soluciona el cacho
  #7 (permalink)  
Antiguo 01/02/2010, 06:29
Avatar de cala932  
Fecha de Ingreso: septiembre-2006
Ubicación: San Juan-Argentina
Mensajes: 902
Antigüedad: 11 años, 2 meses
Puntos: 9
Respuesta: Problema con div (alturas)

Hola cristian_cena lo he probado con IE y firefox (ulimas versiones de ambos) y funciona bien.

Saludos.
__________________
->Aprender es un proceso que incluye el error..
  #8 (permalink)  
Antiguo 01/02/2010, 13:37
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Problema con div (alturas)

cristian_cena
Cita:
Che que bueno que compartas esa solución, ahora, es multibrowser?
hombre para los que tengan desactivado el JS no

bkolores
Cita:
y no seria mejor poner height con una altura fisica... así es más simple y soluciona el cacho
poner una altura fija pues no... ya que por eso son "COLUMNAS EQUILIBRADAS" y si una tiene mas contenido que otro pues siguen del mismo tamaño... y por ende si una supera la altura "fija" que le indicas se cortara y saldra el texto fuera de la capa... asi que no es una solucion....

"altura minima tampoco" enfin las soluciones ya estan dadas en el foro es cuestion de buscar
  #9 (permalink)  
Antiguo 01/02/2010, 14:31
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Problema con div (alturas)

Cita:
Iniciado por alexk Ver Mensaje
hombre para los que tengan desactivado el JS no
Creo que fue clara mi pregunta, mas gracias por tu aporte alex, muy buena observación.
  #10 (permalink)  
Antiguo 01/02/2010, 22:09
Avatar de OmarV  
Fecha de Ingreso: febrero-2010
Mensajes: 82
Antigüedad: 7 años, 10 meses
Puntos: 3
Respuesta: Problema con div (alturas)

La accion para solucioar tu problema mas basica con css que se me ocurre es el wrapper,
Cita:
<style>
#wrapper{
margin:0 auto;
width:600px;
}
#maincontent{
border-right:solid 200px #DFDFDF;
position:absolute;
width:400px;
}
#sidebar{
background:#DFDFDF;
margin-left:400px;
position:absolute;
width:200px;
}
</style>
<div id="wrapper">
<div id="maincontent">... xdd <br>xdd<br></div>
<div id="sidebar">...</div>
</div>
asii las dos divs tendran la misma altura (:
  #11 (permalink)  
Antiguo 04/05/2010, 07:33
Avatar de cala932  
Fecha de Ingreso: septiembre-2006
Ubicación: San Juan-Argentina
Mensajes: 902
Antigüedad: 11 años, 2 meses
Puntos: 9
Respuesta: Problema con div (alturas)

Buenas Gente encontre otra forma mas para resolver el problema de las alturas, asi que la comparto.

Código:
$(document).ready(function() {
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
// how to use
$(document).ready(function() {
equalHeight($(”.left”));
equalHeight($(”.right”));
});
});
Fuente

Saludos.
__________________
->Aprender es un proceso que incluye el error..

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 19:15.