Tema: Regular alturas de contenedores sucesivos

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 .

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):

Código 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

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

Código:

<div class="ajuste"></div> <br />

2) Al class ajuste para sacarle el inline use:

Código:

.ajuste{
	display:none;
	}

(esta bien esto?)

3) Al css de todos los master les quite la propiedad height, y agregue

Código:

<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/cha...ator.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 ?

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:

Código 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:

Código 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');
	});
	
});

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:

Código:

$(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');
	});

}