20/09/2006, 04:35
| |||
| |||
| Ancho ajustado a toda la pantalla sin Javascript Hooola! Tengo una duda que me asalta, bueno más bien una necesidad, tengo un diseño con una cabezera de por ejemplo 60px y un pie de 15px, la capa de contenido me gustaría que se ajustara al ancho restante de la pantalla sin que aparecieran barras de desplazamiento. Bien, esto hacerlo con Javascript me parece sencillo, pero la gracia está en realizarla en CSS compatible sobretodo con InternetExploter Gracias por todo |
|
20/09/2006, 04:41
| ||||
| ||||
| mmm... no entiendo bien... esas medidas (60px - 15px) son de height o width? Como es la estructura de tu página? No te funciona width:100% ?
__________________ Pasamos tus PSD a HTML Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. - |
|
20/09/2006, 05:01
| |||
| |||
| Creo que me he explicado un poco rápido  Son para el height, por tanto tendría por ejemplo esto... <div> <div style="height: 60px"></div> <div style="height: ¿?"></div> <div style="height: 15px"></div> </div> [edición]Leches! si he puesto ancho en toda la pantalla! Me refería a alto  [/edición] Última edición por farlopex; 20/09/2006 a las 05:06 Razón: Olvido de una frase... |
|
20/09/2006, 05:30
| ||||
| ||||
| Cita: Ahora si te entiendo!
Iniciado por farlopex  Leches! si he puesto ancho en toda la pantalla! Me refería a alto  Hay varias formas de hacer lo que pedís, peor yo me acostumbré a la siguiente: Código HTML: <div id="contenedor"> <div id="titular"></div> .... (todo el contenido aquí) <div id="relleno"></div> </div> <div id="pie"></div>
Código:
Espero que se entienda... la capa #relleno está para que el contenido no se solape con el pie, en el caso de que el contenido ocupe + del 100% de alto.html,body{height:100%}
#contenedor{min-height:100%}
#relleno{height:15px}
#pie{height:15px; margin-top:-15px}
Solo una acotación: IE6 no soporta las propiedades min-*, por lo que hay que usar comentarios condicionales (CC) HASTA IE6 (ya que el IE7 si lo soporta).En los CC hay que incluir #contenedor{height:100%}. Esto es porque por más que IE6 no entienda min-height, trata a height "comun" como si en realidad fuera min-height Para que quede + claro  COMPORTAMIENTO CORRECTO min-height: establerce la altura mínima, si el contenido crece y supera esa altura el contenedor se estira hasta el final del contenido. height: establece la altura exacta, si el contenido crece el contenedor NO se estira. max-height: establece la altura máxima Así funcionan Firefox, Opera y demás navegadores que cumplen con los estándares. En cambio en IE6: min-height: ---- height: establerce la altura mínima, si el contenido crece y supera esa altura el contenedor se estira hasta el final del contenido. max-height:----
__________________ Pasamos tus PSD a HTML Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. - |
|
20/09/2006, 05:58
| |||
| |||
| Graccie, ha quedado muy claro Probaré los consejos, me faltaba el min-height. Conocía los comentarios condicionales, más que nada es la única manera de hacer un CSS valido y que funcione con el IExploter |
