Solución para ajustar altura de contenedores en diferentes resoluciones de pantalla

  • Autor Autor Subaru
  • Fecha de inicio Fecha de inicio
S

Subaru

Beta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Buenas tardes a todos! Tengo un problema complejo y recurri a varias personas antes de intentarlo aqui. Me seria de gran ayuda que alguno supiera la manera de solucionar lo siguiente;

Estoy utilizando un jscript para scrolleo vertical. Esto funciono a la maravilla, sin embargo me presento un problema para ciertos monitores. Pueden encontrar el sitio web aqui.

Como veran, cada seccion del sitio se señala con un div, y este div precisa que se le especifiquen las medidas correctas. El problema es que actualmente en ciertos monitores widescreen, la parte inferior del contenido de mis divs se corta, y esto es por no poder usar la instruccion "height:100%" en dichos divs. La razon por la cual no puedo usarla, es por que si la uso, un solo div de todos, ocuparia el 100% del contenido, y no de la pantalla.

Es un tanto dificil de explicar, pero digamos que, el alto de mi contenido real, esta compuesto de cada uno de estos divs scrolleables, y que si le pongo a uno de estos divs height:100%, esto suprimiria al resto. Como usar esta propiedad css no funciona, me quedo sin maneras de que el contenido de cada sección se escale y se centre correctamente en la pantalla.

Alguien sabe como solucionarlo ?
Ya cargo este problema hace un buen tiempo, y seria un milagro que alguien tuviera la respuesta. 🙂

Desde ya muchas gracias por siquiera intentarlo ! Es un problema para valientes XD.
 
Las secciones estan con divs que tienen id="sectionNUMEROSECCION" no?
Luego dentro de cada seccion tienes un div de contenido con class="masterSEGUIDODEUNNUMERO"

Dentro de este ultimo div tienes un div sin clase ni nada y con el estilo seteado inline (calculo que este div o por lo menos el estilo de ese div te lo setea el plugin que estas usando para el scroll). Ese div tiene un heigh variable segun la seccion que estas viendo, calculo que el height que le pone es un intento para que el contenido salga centrado. Yo estoy con una notebook widescreen y si se ve cortado abajo.
A este div yo le pondria un height fijo de 70px (que es el alto de tu header). De esta forma ya no se centraria verticalmente el contenido pero tampoco se te cortaria en pantallas widescreen.
Talvez el plugin que estas usando tiene una opcion para decirle que centre o no el contenido, solo deshabilitandola te quedaria bien.
Si existe esta opcion de centrar, tambien podrias controlar antes de setear el plugin el height de la pantalla con $(window).height(). Si el height es mayor a una medida X (medida del alto del contenido) habilitas la opcion de centrado, en el caso contrario no la habilitas
 
Chapi, muchisimas gracias por la atencion y el consejo,
Vamos por partes,

1) Las secciones estan con divs que tienen id="sectionNUMEROSECCION"m si

2) El div sin clase y sin nada lo tuve que poner yo, ante mi incapacidad de centrarlo, pero claramente, no es suficiente para poder evitar los problemas en las widescreens, esto es precisamente lo que necesito solucionar.

3) El ejemplo que utilice para hacerlo funcionar es este:

Pero no estoy demasiado versado en jscript, y si bien tengo a mano la pagina del script que se utiliza en el ejemplo aun no encuentro alguna sentencia para centrar. Ahora mismo la estoy buscando, si alguien la encuentra se los agradeceria infinitamente.
 
El div sin clase pense que te lo agregaba el plugin con alguna opcion de centrado, si lo pusiste vos, es probable que esa opcion de centrado no exista.

La alternativa mas facil que hay aca es que a ese div le pongas un height de 70px asi el contenido siempre estaria arriba, no saldria centrado pero no se cortaria.
La otra alternativa es que ese height lo calcules por javascript para centrar el contenido, seria algo asi:
Primero a ese div que no tiene ninguna identificacion tendrias que ponerle una clase y sacarle el estilo inline.
Despues a cada div de clase master le tenes que sacar ese height de 1000px y hacer que crezca con el contenido en vez de ser fijo.
Para que el div crezca con el contenido tenes 2 opciones, le agregas overflow=hidden (suena raro pero funcion, aunque no es la mejor forma) o al final de ese div, antes de cerrarlo pones un div mas asi: <div class="clear"></div> luego en tu CSS a esa clase le pones .clear {clear:both} (esta es la mejor opcion).
Ahora que tus divs tienen el tamaño especifico al contenido, podes calcular el alto mediante javascript y con eso ponerle un margin top o setear el height de ese div sin clase (tendrias que ponerle una clase).

Javascript (teniendo en cuenta que le pusiste una clase al div y que estas usando jQuery):
HTML: 
$(document).ready(function(){
	
	var screenHeight = $(window).height();
	
	$('.claseDelDivSinClase').each(function(){
		var padreHeight = $(this).parent().height();
		//Ese 70 es el alto de tu header
		var calculatedHeight = ((screenHeight - padreHeight) / 2) + 70;
		$(this).css('height', calculatedHeight + 'px');
	});
	
});

Eso va a funcionar en las condiciones que te puse anteriormente, o sea que el contenedor master no tenga un height fijo de 1000px si no que el tamaño crezca con el contenido y te lo va a centrar en todas las resoluciones.
No lo corri el codigo, puede haber algun error de sintaxis, pero creo que esta bien.
Ese javascript asi tal cual como lo puse ahi (si no hay ningun error), lo pegas en un archivo nuevo, le pones lo que quieras de nombre, por ejemplo "centrar.js" e incluis el script en tu pagina como cualquier js.

Decime despues como fue
 
Última edición:
Aplique todo, pero debo haberme salteado algun detalle, pues aun no centra las cosas, escribo los pasos que seguí:

la pagina de prueba esta en Website Vertical Scrolling with jQuery

1) Cambie todos los div's son clase por
Insertar CODE, HTML o PHP: 
<div class="ajuste"></div> <br />

2) Al class ajuste para sacarle el inline use:
Insertar CODE, HTML o PHP: 
.ajuste{
	display:none;
	}
(esta bien esto?)

3) Al css de todos los master les quite la propiedad height, y agregue
Insertar CODE, HTML o PHP: 
<div class="clear"></div>
antes de cerrar cada div con clase master. y agregue el css correspondiente.

4) arme el js y lo inclui. Lo subí en http://www.modeproject.com.ar/js/chapi.regulator.jquery.js

5) luego lo inclui: ( en el head )
<!-- include Chapi plugin -->
<script type="text/javascript" src="js/chapi.regulator.jquery.js"></script>

Y creo que eso es todo. algun detalle debe faltarle para que lo centre apropiadamente, pues por ahora el contenido se queda arriba. Como lo ven ?
 
Última edición:
No esta bien, con lo de sacar el estilo inline me referia a que no este puesto en el elemento mismo en el html.
Esto es un elemento con estilo inline:
HTML: 
<div style="margin:20px"></div>
Que tenga el estilo ahi en el mismo elemento quiere decir estilo inline.

Si al div le pones display none, esto te lo desaparece de tu html y no importa que height ni margins ni nada que le pongas, simplemente es como que no esta.

Tambien fijate que en el js que incluiste segun lo que te puse, hay cosas de mas.
Yo habia copiado una funcion parecida que estoy usando y la habia adaptado para lo que necesitas vos y me olvide de borrar algunas cosas.
Fijate que despues edite y tiene menos codigo.

Esto es lo que tenes que poner:

HTML: 
$(document).ready(function(){
	
	var screenHeight = $(window).height();
	
	$('.claseDelDivSinClase').each(function(){
		var padreHeight = $(this).parent().height();
		//Ese 70 es el alto de tu header
		var calculatedHeight = ((screenHeight - padreHeight) / 2) + 70;
		$(this).css('height', calculatedHeight + 'px');
	});
	
});
 
Última edición:
Listo, arreglado en ambos casos. Pero aun no funciona completamente. Subi el resultado en Website Vertical Scrolling with jQuery

pd: este js lograria que si yo redimensiono la ventana el margen se modificada dinamicamente, no?
 
no, porque solo se ejecuta cuando dispara el evento "Ready"
 
y no podria modificarse esto para que funcionara como un loop ?
 
Como te dijo PatrikV solo se ejecuta una vez cuando la pagina esta completamente cargada.

Proba sacandole el + 70 que yo le puse como ajuste por el tamaño del header.
Igualmente estas teniendo el problema que si el contenido es mas grande que el area de la pantalla siempre se te va a cortar porque no aparece un scroll.

Para que se ejecute cada vez que cambian el tamaño del navegador proba asi:

Insertar CODE, HTML o PHP: 
$(document).ready(function(){

    calcularMargin();
    $(window).resize(function() {
        calcularMargin();
    });
    
	
});

function calcularMargin() {
    var screenHeight = $(window).height();
	
	$('.claseDelDivSinClase').each(function(){
		var padreHeight = $(this).parent().height();
		//Ese 70 es el alto de tu header
		var calculatedHeight = ((screenHeight - padreHeight) / 2) + 70;
		$(this).css('height', calculatedHeight + 'px');
	});

}
 
Exito parcial!

El centrado funciona bien sin el +70 en el primer script que estabamos probando.

En el segundo codigo para que responda al cambio de tamaño del navegador sin embargo, no centra el contenido y lo deja contra la parte superior. Subi el resultado a Website Vertical Scrolling with jQuery

Si hubiera manera de solucionar eso quedaria impecable.
 
Tambien elimina ese <br> que pusiste despues del div ajuste

---------- Post added 04-mar-2013 at 19:42 ----------

Si ya quedo centrado, lo dejaria como estaba al principio sacandole el ajuste de los 70px

La gente no anda cambiando el tamaño del navegador cuando navega.
Ademas asi como te lo puse, si el tamaño cambia porque estan arrastrando los margenes, la funcion se ejecuta un monton de veces porque es algo analogico, va cambiando de a x cantidad de pixeles, segun la velocidad con la que la persona esta arrastrando el borde, y esto puede hacer que el navegador se cuelgue.
 
O sea que a tu criterio no se puede hacer ese ajuste dinamico ?

[ De cualquier manera muchisimas gracias por todo el trabajo, me ayudaste muchisimo! Si llegas a necesitar ayuda con algo relacionado al diseño que es mi area, no dudes en pedirme lo que sea. ]
 
Si se puede hacer, pero no esta bueno asi como te lo puse, hay que hacerlo un poco mejor. Pero segun mi criterio tampoco es necesario ya que la gente no anda cambiando el tamaño del navegador como te comente, esta siempre en pantalla completa. Y si por algun motivo lo restauran, cuando quieren leer nuevamente lo mandan a pantalla completa.

No hay de que 🙂
 
Muchisimas gracias.

Si alguien sabe como solucionar el asunto del redimensionamiento dinamico, seria fabuloso para mi curiosidad 🙂
 
Puedes poner un "hook" (enganche?) en el evento resize.
 
Mi conocimiento de js es limitado, podrias explicarme ?
 
jQuery y el explorador disparan el evento resize cuando cambia el tamaño de la ventana. Puedes reposicionar elementos en ese evento, aunque personalmente haría todo en CSS - no te puedo ayudar, porque no sé como se debería ver (no me sale ningún scroll).
 
No te sale ningun scroll por que esta escondido. La idea es que la pagina se controle mediante los botones, y no pueda scrollearse de manera manual. Todo en CSS no se podia hacer, por razones que estan escritas al principio.
 
Hay que estar conectado o registrado para responder aquí.
Atrás
Arriba