Foros del Web » Creando para Internet » CSS »

Ancho ajustado a toda la pantalla sin Javascript

Estas en el tema de Ancho ajustado a toda la pantalla sin Javascript en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 20/09/2006, 05:35
 
Fecha de Ingreso: octubre-2003
Mensajes: 10
Antigüedad: 14 años, 2 meses
Puntos: 0
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
  #2 (permalink)  
Antiguo 20/09/2006, 05:41
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 10 meses
Puntos: 997
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. -
  #3 (permalink)  
Antiguo 20/09/2006, 06:01
 
Fecha de Ingreso: octubre-2003
Mensajes: 10
Antigüedad: 14 años, 2 meses
Puntos: 0
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 06:06 Razón: Olvido de una frase...
  #4 (permalink)  
Antiguo 20/09/2006, 06:30
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 10 meses
Puntos: 997
Cita:
Iniciado por farlopex Ver Mensaje
Leches! si he puesto ancho en toda la pantalla! Me refería a alto
Ahora si te entiendo!

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:
html,body{height:100%}
#contenedor{min-height:100%}
#relleno{height:15px}
#pie{height:15px; margin-top:-15px}
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.


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. -
  #5 (permalink)  
Antiguo 20/09/2006, 06:58
 
Fecha de Ingreso: octubre-2003
Mensajes: 10
Antigüedad: 14 años, 2 meses
Puntos: 0
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
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:57.