Foros del Web » Programando para Internet » Javascript »

Configurar altura de divs con javascript en función a la resolución de pantalla

Estas en el tema de Configurar altura de divs con javascript en función a la resolución de pantalla en el foro de Javascript en Foros del Web. Hola a todos, tengo suficientes nociones de javascript como para copiar un código y adaptarlo a mi web, si no requiere mucho cambio. Pero lo ...
  #1 (permalink)  
Antiguo 03/07/2011, 12:12
Avatar de Paramericano  
Fecha de Ingreso: agosto-2010
Mensajes: 137
Antigüedad: 9 años, 3 meses
Puntos: 8
Configurar altura de divs con javascript en función a la resolución de pantalla

Hola a todos, tengo suficientes nociones de javascript como para copiar un código y adaptarlo a mi web, si no requiere mucho cambio.
Pero lo que quiero, hasta ahí no llego, necesito ayuda que en google no encuentro.

La cuestión es:
- Deseo adaptar las alturas de unas divs a lo largo de la pantalla. Las divs son flotantes, con lo cual css te ajusta el porcentaje a lo que haya dentro de ellas pero no a lo largo de la pantalla.

- El recurso es js. Ahora bien, como hacer el código de manera que se ajuste la resolución de la pantalla a la altura de las divs? Dicho de otra manera, cómo asignar la altura de la pantalla al tamaño de altura de las divs (o mejor dicho, a sus id o class)?

- Y ya para matrícula de honor: resulta que las divs están dentro de un cuerpo, al cual precede un encabezado (logo) y un pie: cómo, pues, se le puede restar esos tamaños a la altura de las divs obtenida en la cuestión anterior.
Es más, se podría tener en cuenta también el tamaño del encabezado y pie según el tamaño de las fuentes que se estén usando?

- Y ya para "cum laude": la resolución es fácil obtenerla, pero cada navegador muestra el body más alto o menos alto según los iconos y demás cosas que presente por encima (barra de menú, del navegador, etc).
Entonces se me ocurre..., como las divs están dentro de otro contenedor llamado "cuerpo"...,
...la pregunta es: se puede detectar con javascript la altura en píxeles donde comienza el "cuerpo" en relación a la pantalla?

Nota: esta última cuestión es más importante que su antecesora inmediata ya que incluiría su misma solución.


Uffff! Me he pasado esta vez. Espero que alguien intente solidarizarse y meterse dentro del kit de la cuestión, que no es fácil, sobre todo para el que sólo tiene nociones básicas.
  #2 (permalink)  
Antiguo 03/07/2011, 16:05
Avatar de 23r9i0  
Fecha de Ingreso: noviembre-2008
Ubicación: Catalonia
Mensajes: 203
Antigüedad: 11 años
Puntos: 33
Respuesta: Configurar altura de divs con javascript en función a la resolución de pan

Hola normalmente no respondo a preguntas ya que tampoco soy un experto pero en este caso creo que lo que tiene que hacer es hacer lo siguiente:
- averiguar el height (altura) de la ventana con $(window).height();
- luego restar los pixeles que quieras u ocupe el header
- y el resultado es tu numero
Este codigo usa jquery
Código Javascript:
Ver original
  1. $(document).ready(function(){
  2.     windowheight = $(window).height();
  3.     t = windowheight - 450; // 450 es el numero que ocupa el header
  4.     $("contenido").css('top', t); // en el caso que sea declarado el div con position: relativa
  5.     }
  6. });
Espero que te sirva
  #3 (permalink)  
Antiguo 03/07/2011, 18:47
Avatar de Paramericano  
Fecha de Ingreso: agosto-2010
Mensajes: 137
Antigüedad: 9 años, 3 meses
Puntos: 8
Respuesta: Configurar altura de divs con javascript en función a la resolución de pan

Cita:
Iniciado por 23r9i0 Ver Mensaje
Hola normalmente no respondo a preguntas ya que tampoco soy un experto pero en este caso creo que lo que tiene que hacer es hacer lo siguiente:
- averiguar el height (altura) de la ventana con $(window).height();
- luego restar los pixeles que quieras u ocupe el header
- y el resultado es tu numero
Este codigo usa jquery
Código Javascript:
Ver original
  1. $(document).ready(function(){
  2.     windowheight = $(window).height();
  3.     t = windowheight - 450; // 450 es el numero que ocupa el header
  4.     $("contenido").css('top', t); // en el caso que sea declarado el div con position: relativa
  5.     }
  6. });
Espero que te sirva
Gracias R2d2 (o como te llames, jaja), sí que me ha servido de gran ayuda. Si te dedicas, puedes alegrar el día a mucha gente, no te cortes.
Ya ves que estoy muy contento, te quiero...
Todavía tengo que retocar alguna cosilla pero la puerta a la 4a dimensión ya está abierta, graicas!!!
  #4 (permalink)  
Antiguo 04/07/2011, 05:46
Avatar de Paramericano  
Fecha de Ingreso: agosto-2010
Mensajes: 137
Antigüedad: 9 años, 3 meses
Puntos: 8
Respuesta: Configurar altura de divs con javascript en función a la resolución de pan

Vale, ya tengo una nueva ligera pregunta,
un gran amigo me ha dado una solución una línea de la cual era:
Código:
$("contenido").css('height', x - 450);
...mas o menos, un poco modificado ya.

La pregunta es: el número '450' es por defecto en píxeles. Ahora bien, ¿hay alguna manera de introducir el número en 'em's?

Precisamente el valor que quiero restar está en función de un div variable en ems.
Gracias.

Etiquetas: altura, divs, pantalla, resolución
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 11:07.