AJUSTAR LA ALTURA

Tengo la siguiente duda. Imaginémos una página con un menu izquierdo (#divIZquierdo) y con un cuerpo en el que va el texto (#divCuerpo); aquél tiene un color de fondo diferente a este. Mi problema es que, al contener más texto, la parte CUERPO tiene una altura mayor al MENÚ. ¿Cómo puedo conseguir que ambos sean iguales en altura:
Gracias.

Creo que esto te puede servir. Sinceramente no lo leí, pero creo que por aquí anda tu asunto.

De otro modo, en CL tenemos buenos tutos de CSS que te pueden ayudar.

Gracias por tu respuesta, pero la solución que me da en la página que me has enviado (utilizar una imagen de fondo para dar la sensación de que las dos columnas tienen la misma altura) es la que quiero evitar yo.

Lo veo dificil, ya que si el contenido es mayor al contenedor el html te va a agrandar el contenedor hasta que pueda entrar su contenido. Puedes probar haciendo un div de 100x100 con un borde negro y agregale MUUUUUUCHO texto, el div se te agrandara para que pueda entrar todo el texto.
Lo que podrias hacer es poner un iFrame dentro del div cuerpo, entonces cada ves que tengas mucha cantidad de texto aparecera una barrita de scroll (algo parecido a cuando escribes un e-mail).
Otra solucion es usar un TextArea para poner todo ese texto, y sucedera lo mismo que con el iFrame cuando el texto sea mucho.

También puedes hacer que en la parte de el cuerpo se haga un scroll cuando el texto ocupe más de lo que ocupa la div, para eso utiliza

Código :

overflow:auto;

Eso no lo sabia

*Corre a implementarlo

NO USES EL IFRAME NO TIENE CASO!!! usa overflow como ya te lo digeron, tambien se podria con js al menos eso creo... la idea seria que mediante js tomas el height del div dondte tienes el texto y ese valor se lo asignas al height del menu.... tal vez no se pueda, nunca lo eh intentado pero es una idea...

Gracias... el uso de los IFRAME los abandoné hace tiempo; en efecto, había pensado en JAVASCRIPT para dar a la columna más pequeña el "height" de la mayor.
¡Y este problema simplemente se me plantea porque buscaba el modo de mostrar las columnas con la misma altura sin tener que utilizar una imagen de fondo para dar esa sensación!

ok... seria bueno que al solucionarlo lo pongas por aca como tutorial o algo asi...
Saludos

SÍ, lo pondré como tutorial (si queréis) e incluso en el enlace que os copio, partí del diseño de una página que hallé en internet; utilizaba TABLE para la maquetación y me propuse sustituir este diseño por DIV. Las dos columnas (la del contenido y la del menú) tienen la misma altura, pero gracias al uso de una imagen de fondo; y ésto era lo que quería evitar, de ahí mi pregunta.

Página: http://users.adelphia.net/~hannia72/pags/2006-11/index.html

Eso sí: me gustaría, si la véis, me indicáseis los errores.

Y se puede saber cual es la idea de hacer eso?
O sea, para que el empeño de no usar una solución que realmente funciona?

Pues simplemente saber si es posible conseguirlo sin el uso de imágenes de fondo. ¡Una simple curiosidad! Quizá sea una deformación de aquellos que procedemos del mundo de la programación: escribías varias líneas de código, todo funcionaba bien, hasta que descubrías que con un par de líneas obtenías el mismo resultado

usar imagenes para lograr cierto efecto no es siempre lo mejor, pasa como cuando usabas gif trnsparente para dar sangria o algo asi,....

buzu escribió:

Eso es cierto, pero en muchos casos sí es la mejor opción.

Por ejemplo, en este caso considero que sí es la mejor opción, ya que diferenciar columnas con colores es un objetivo puramente gráfico, por eso debe hacerse solo con CSS, ya que esta es su función.
"Ensuciar" el codigo con JS para hacer una tarea que le corresponde a CSS definitivamente NO es una buena práctica. Y no me digan que si el DOM, que si un archivo JS separado, que si condicionales.... que es lo mismo.

ok... ese es tu punto de vista y muy respetable... hasta no ver la solucion que dio nuestro buen amigo, no podre decir si una o la otra es la mejor opcion en lo que a mi respecta... algo seguro es que llevas mucha razon cuando dices que al ser algo meramente fgrafico deveria ser controlado mediante css, por tanto seria bueno que en algun momento se diera la opcion al css de especificar la altura de un div haciendo referencia a la altura de otro div en la misma pagina... eso seria bueno... pero por ahora hay que usar "trucos" como estos....

El inconveniente que tiene la imágen es que no serviría en un caso como éste.
De todas formas apoyo el razonamiento de ramm, ya no sólo por lo de ensuciar código, supongamos que se pueda lograr con css sólamente. La cosa es que en caso de que se pueda lograr, no se puede de una forma simple, sino "engorrosa". Creo que es bastante mejor hacer un código simple y ordenado a estar pendiente de muchas lineas de código para crear el mismo efecto; además para trabajar en equipo es mejor también, ya que de un sólo vistazo entiendes la hoja de estilos y no te tienen que explicar que "estas líneas tan raras son para crear tal efecto"
No sé si me he explicado bien, pero espero que captéis la idea...

Ramm escribió:

"que si el DOM, que si un archivo JS separado, que si condicionales.... que es lo mismo."

Btw, hay casos reales en donde el javascript se puede usar para agregar clases y luego son estilizados con css. Este no es el caso, pero necesitaba aclararlo.

Saludos ramm.

NEO_JP escribió:

Ciertamente, es bueno aclarar eso.

Saludos NEO_JP

Si no me equivoco creo que la solucion a este problema se encuentra en CSS y en especial en los atributos height y min-height.
Al darle a esto atributos valores en porcentaje (100%), se puede conseguir el efecto que creo que quieres, lo que pasa que existen un monton de problemas con estos atributos en los principales navegadores.
En el estandar la solucion seria la siguiente:
proporcionamos height con 100% si queremos que el div se expanda por todo lo alto aunque el contenido no lo ocupe. Para hacer esto necesitamos hacer referencia al elemento contenedor del div, que en este caso es body, por lo que establecemos body con height 100%, lo mismo pasa con el elemento contenedor de body html por lo que le asignamos height en 100% tambien.
Aqui surge un problema ya que si el contenido de nuetro div supera el 100%, es decir la altura, el contenido se saldra del div o no, esto depende del valor de la propiedad overflow.
La solucion a este problema viene de la mano de min-height, que exactamente eso, proporcionar una altura minima de manera que si el contenido sobrepasa esa altura minima el cuadro se expandira con el contenido.
Con esto podemos conseguir un cuadro en un navegador estandar(firefox...) que ocupe todo el alto del navegador y si el contenido es mayor el cuadro se expandira con el.

Con IE las cosas son diferentes;
La pricipal diferencia es que IE toma la propiedad height como el min-height estandar y asu vez hace caso omiso de min-height.

La mejor solucion multinavegador que encontrado se basa en lo siguiente:
Definimos la propiedad min-height para el div (IE no le hara caso)

Despues utilizamos el selector * con la ruta * html div y establecemos height en 100%, esto no lo detectaran los navegadores mas respetuoso con los estandares.

<code>
html, body{
height:100%; //Estandar
}
div {
min-height:100%; // Estandar
}
* html div{
height:100%; //IE
}
</code>

Al final conseguimos div en todos los navegadores que ocupen todo el alto de la pantalla idependientemente de su contenido.

Esta solucion ami juicio esta bastante bien auque me surgen algunos problemas que a pesar se la ayuda de cristalab no he conseguido solucionar satisfactoriamente como en:
http://www.cristalab.com/foros/viewtopic.php?t=31750

referencia:
http://simplelogica.net/caoticoneutral/index.php?p=33