Height 100% en menú

Joder, pues sigo sin verlo bien (Opera 9.21 Linux). A ver en casa que lo pruebe con Opera de win, pero me extraña.

El ejemplo de Vent tampoco se me ve bien, ocupa el 100% de la página pero solo del viewport, cuando haces scroll hacia abajo ya se corta.

orange

Me lo tendría que mirar, de todas formas has de separar sí o sí los min-heights de los heights, más que nada porque los heights son una ñapa para IE6.

OK lo he probado, pero aún así en IE6 no me rula

Gracias

Me lo tendría que mirar, de todas formas has de separar sí o sí los min-heights de los heights, más que nada porque los heights son una ñapa para IE6.

Si Borja ya me di cuen.... pero...

poniendolo así:

General:
<code>body {
font-size: xx-small;
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
height: 100%;
}
#contenedor {
background-color: #CCCCCC;
position: absolute;
width: 100%;
min-height: 100%;
}
#menu {
background-color: #EEE;
width: 150px;
position: absolute;
left: 0px;
top: 0px;
height: 100%;
min-height: 100%;
}
#contenido {
background-color: #D9E8FF;
margin-left: 160px;
width: 44.7em;
}</code>

IE
<code>body {
font-size: xx-small;
fo\nt-size: x-small; /* IE5, IE5.5 */
}
#contenedor {
height: 100%;
}</code>

Se me ve bien en todos menos en IE6 .....

LINK

min-height: 100%;
height: 100%;

Esto no te va a funcionar en estándares porque le estás definiendo a fuego el height en 100%. Eso se lo tienes que meter sólo para Explorer 6, para el resto min-height.

Oooops!! A mí en mi FireFox no me va tio. Me vuelve a salir como nos salía al principio. El 100% que considera es el que se ve en pantalla. Cuando bajo el scroll ya no llega.

¿Porqué nos hacen la vida tan dificil?

Solucionado y crossbrowsing sin javascript y usando hojas de estilo para cada browser mejor, aquí lo pongo todo junto para que se vea:

<code>body {
font-size: xx-small;
fo\nt-size: x-small; /* IE5, IE5.5 */
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
height: 100%;
}
#contenedor {
background-color: #CCCCCC;
position: absolute;
width: 100%;
min-height:100%;
height: 100%;
}
#menu {
min-height: 100%;
height: 100%;
background-color: #EEE;
width: 150px;
position: absolute;
left: 0px;
top: 0px;
}
#contenido {
background-color: #D9E8FF;
margin-left: 160px;
width: 44.7em;
}</code>

Probado en IE4, IE5, IE5.5, IE6, IE7, Firefox, Opera y Safari.

Lo tenéis aquí pa verlo: Altura al 100% Crossbrowsing

*EDITO* Tengo que echarle otro ojo porque parece que en IE5MAC no rula.... ya os contaré...

siguiendo el tuto de alistapart:
<code>body {
font-size:x-small;
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
height:100%;
}
#contenedor {
background-color: #CCCCCC;
position: absolute;
width: 100%;
height:100%;
}
#menu {
background-color: #EEE;
width: 150px;
position: absolute;
left: 0px;
top: 10px;
bottom: 0px;
height:expression(document.body.clientHeight-10);
}
#contenido {
background-color: #D9E8FF;
margin-left: 160px;
width: 44.7em;
}</code>

Le di 10px de margen arriba pa fardar :P
Me funciona en IE6 y FF... no puedo revisar en otros ahora mismo...
Podeis verlo aqui:
http://www.ventdaval.com/upload/archivos/altura100.htm

Saludos...

Mejor hazlo en Flash :D

Lo màximo que consigo es esto:

<code>
body {
font-size:x-small;
margin: 0px;
padding: 0px;
height:200%;
min-height:100%;
font-family: Arial, Helvetica, sans-serif;
}
#contenedor {
background-color: #CCCCCC;
position: relative;
width: 100%;
height: 100%;
min-height:100%;
}
#menu {
height:100%;
min-height:100%;
background-color: #EEE;
width: 150px;
left: 0px;
top: 0px;
position: absolute;
}
#contenido {
background-color: #D9E8FF;
margin-left: 160px;
width: 44.7em;
}
</code>

a ver si te sirve.

en IE6 tampoco :(

Jorl! siento arruinarte la felicididad cross-browser, pero en Opera 9.21 no tira :(

Lo prometido es deuda, así que ahí va el ejemplo:

Menú con altura 100%

Y aquí su aplicación real con cabecera y tó... ;)

Aplicación real

no me entero mucho del post, pero igual os sirve esto:
http://www.alistapart.com/articles/conflictingabsolutepositions
En sintesis, seria algo asi:
<code>position:absolute;
top:18px;
bottom:100%;</code>

mambrú

Vaya, ¿cómo consigo ver tu email? Es que en tu ficha debe de estar capado y no puedo verlo. El mio: mambrudesign arroba gmail.com. Espero que no me lo pillen los bots y me hinchen a spam.....

He estado probando con lo que me mandaste y va deluxe, quitando un par de cosas que ya he modificado, como por ejemplo poner min-height: 100% al menu también para que siempre ocuper todo, aunque el contenido no llegue abajo.

Luego al llegar a casa ya lo subo pa que se vea.

Un saludo y muchas gracias ;)

Vaya, ¿cómo consigo ver tu email? Es que en tu ficha debe de estar capado y no puedo verlo. El mio: mambrudesign arroba gmail.com. Espero que no me lo pillen los bots y me hinchen a spam.....

Bueno tio, me he picado con esta historia y he conseguido lo que decías. Ahora el tema está en que lo puedas adaptar al diseño que quieres darle.

Te iba a poner el código aquí, pero deben de ser las restricciones del foro que se me come los estilos y los borra. Te envío un mail.

Si alguien lo necesita en algún momento, que me escriba un mail y se lo mando.

Métele todo el Lorem Ipsum que quieras y verás que funciona.

Espero que te sirva. ;)

Gracias Borja, ya seguiré probando de todas formas.

Un saludo

demssite

Hola Borja, he estado probando lo que me comentaste en el último post y no se si es que lo hago mal o que no te entendí muy bien, pero no me va...

Es un posicionamiento complejo, si tengo un rato te trato de hacer una prueba de concepto, pero estos días voy de culo.

mambrú

Tio, he probado y es por el borde. Tu menú mide el 100%, de acuerdo, pero en el momento que le metes borde, te medirá 100% + el borde. ¿Me entiendes? No se si será tan fundamental que esté presente. Sino, quítalo y te ahorras el tener el scroll dando por saco.

Saludos

Esa es otra, cierto, aunque creo que los problemas que comentaba van por otro sitio.

mambrú

Tio, he probado y es por el borde. Tu menú mide el 100%, de acuerdo, pero en el momento que le metes borde, te medirá 100% + el borde. ¿Me entiendes? No se si será tan fundamental que esté presente. Sino, quítalo y te ahorras el tener el scroll dando por saco.

Saludos

Gracias mambru, pero no me refiero a eso, me refiero a que la altura del menu crazca y ocupe siempre el 100% de la web

Tio, he probado y es por el borde. Tu menú mide el 100%, de acuerdo, pero en el momento que le metes borde, te medirá 100% + el borde. ¿Me entiendes? No se si será tan fundamental que esté presente. Sino, quítalo y te ahorras el tener el scroll dando por saco.

Saludos

Hola Borja, he estado probando lo que me comentaste en el último post y no se si es que lo hago mal o que no te entendí muy bien, pero no me va...

Gracias

Ya veo, creo que lo que tienes que hacer es meter el menu dentro del DIV del contenido, de manera que si el DIV del contenido es mayor del 100% se lo lleve para abajo (y después jugar con los posicionamientos para que todo quede igual).

He estado probando y me funciona si el contenido no supera el height inicia del body... no se si me explico

Dejo un enlace donde se vea mejor: http://www.martinasantamarta.com/test/cv.html

Graciasss

Si te explicas Borja, muchas gracias ya le echo un ojo esta noche y comento.

Un saludo.
Diego

Tu problema es que el menú mide el 100% de la pantalla, pero como además lo posicionas 9em (creo) hacia abajo... pues te sale un scroll igual a esos 9em.

Lo que tienes que hacer es que el menu mida como mínimo (ojo!!) 100% (min-height, no height), pero posicionarlo en 0,0 Y luego separas su contenido metiendo otra caja dentro (que ya posicionas a los 9em que necesitas).

No sé si me explico.

MM estuve echando un ojo a tu layout kr=n y creo q no tiene que ver. ;)

OK ya le echo un ojo ahora y te cuento, pero weno pa mi tampoco son horas, así que sino mañana con más calma

Gracias

Si te sirve de ayuda, mi portfolio tiene un menu parecido (creo) a lo que buscas.

Pero no son horas y lo mismo a mi me ha sonado y no tiene na que ver :D