epelpad

[Ayuda] Problema con menú que ocupa todo el alto de la web

Hola a todos, estoy teniendo un problema que no estoy logrando resolver con CSS, soy programador php y la verdad que de lo que es maquetación se lo justo.
Tuve que realizar un desarrollo de unos abms para un sitio que antes tenía sus productos metidos directamente en el html y depende de la sección, contenido, etc, etc le daban la altura con el atributo style a cada elemento.
El problema esta en que ahora necesito que los menus tenga un alto variable (mas alto o menos) depende del contenido.
Probe y probe y probe con height:100% y min-height:100% pero no logro dar en la tecla, quizás alguno que la tenga un poco mas clara con el tema me puede dar una mano.


Lo que pasa por ejemplo cuando el contenido es muy largo es lo siguiente:



y cuando el menu es muy largo es mucho peor


Les dejo el link al sitio en cuestión para que puedan ver el html y css, y la repectiva sección que anda con problemas.

http://www.m2desarrollos.com.ar/producto.php?id=5



Muchas gracias!!

5 comentarios - [Ayuda] Problema con menú que ocupa todo el alto de la web

gab +1
Poniendo


#menuIzqDescargas {
    float: left;
    height: 100%;
    width: 201px;
    background-image: url('../images/fondoIzqInt.png');
    background-repeat: repeat-y;
}


Se me ve bien
gab
@juanmaa16 No se rompería porque menuInternasDesc está anidado dentro demenuIzqDescargas de hecho probalo abriendo unidades. Y si no te conforma la respuesta podes darle el valor inherit para que lo tome de su padre.
juanmaa16
@gabstrimell Ahi puse el código tal cual me lo pusiste, y agregue varias unidades mas en el html para probar (con firebug), te paso la lista para que pongas como ejemplo:
[code]
<ul>
<li><a href="?id=5">PRESENTACION</a></li>
<div id="raya"></div>
<li><a style="color:#af0a3c" href="?id=5&amp;v=unidades&amp;idUnidad=23">UNIDADES</a></li>
<ul><li><a style="color:#af0a3c" href="?id=5&amp;v=un
gab
@juanmaa16 Por eso te dije dale inherit, o probá con auto, es cuestión de ensayo y error si no se maqueto muchas veces. O lee como funcionan las propiedades y aplicalo.
gab
Por otra parte al no tener diseño responsive y no maquetar bien con una resolucion inferior a 1075px de ancho el sitio se empieza a ver mal/dejar de ver en su totalidad, etc.
SetoCaiba
Prueba con ésto.

#menuIzqDescargas {
float: left;
height: auto;
width: 201px;
background-image: url(../images/fondoIzqInt.png);
background-repeat: repeat-y;
}
pichoncitotv
Acá te dejo una base de como deberías hacerlo: http://codepen.io/anon/pen/dweif

Tu problema si bien no encuentro una solución simple para darte es que le pones altura a muchos contenedores cuando no es necesario, en mi ejemplo está el mismo layout que tenes vos (dos columnas laterales y un contenido principal al medio).
soyBillGates
Exacto, lo que note es que le pone height a #menuIzqDescargas, esta forzando a este div a tener una altura determinada en vez de dejar que "se ajuste al contenido"

@juanmaa16 Si queres que quede como en la imagen, hace lo que dije por ahi abajo.
soyBillGates
Creo, y repito, creo,... que no entendi un carajo. Pero a la vez creo haber entendido un poco
Si es como pienso, sacale a #menuIzqDescargas el height

Es decir:



#menuIzqDescargas{
    height: 480px;   // borra esta linea o ponela en auto (height. auto;)
}

pichoncitotv
si probás hacerlo con devtools de chrome/firefox notarás que no soluciona nada esto, son muchos heights y no hay niguna ningun orden de contenedores, solo un intento de hacerlos flotar uno al lado del otro.
soyBillGates
@pichoncitotv Pero que es lo que el quiero exactamente???
Tienes que ser miembro para responder en este tema