Height 100% en menú
5 seguidores
Estoy maquetando un sitio web y me encuentro con que quiero que el menúa de la izquierda tenga height 100% siempre. Es un layout liquido con menu de ancho fijo.
Pero al darle al menu el 100% me sale el scroll aunque no deba salir. Entiendo que es normal, porque al estar posicionado absolutamente pilla el height del body, pero desde donde está posicionado (eso es lo que creo que hace), he probado de mil maneras y no se qué solución puede valer.
Os dejo un link al site en cuestión
Gracias.
Diego
Kr0n
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.
demssite
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
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.
demssite
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
orange
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.
Usuario desconocido
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?
demssite
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é...
Ventd'Aval
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...
Athomix
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.
Ventd'Aval
en IE6 tampoco :(
Kr0n
Jorl! siento arruinarte la felicididad cross-browser, pero en Opera 9.21 no tira :(
demssite
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
Ventd'Aval
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>
demssite
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 ;)
Usuario desconocido
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.....
Usuario desconocido
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. ;)
demssite
Gracias Borja, ya seguiré probando de todas formas.
Un saludo
orange
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.
demssite
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
Usuario desconocido
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
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...
Gracias
orange
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).
demssite
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
demssite
Si te explicas Borja, muchas gracias ya le echo un ojo esta noche y comento.
Un saludo.
Diego
orange
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.
demssite
MM estuve echando un ojo a tu layout kr=n y creo q no tiene que ver. ;)
demssite
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
Kr0n
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