3 divs cada uno al 100%

[TotemmetoT]

Hola a todos, estoy programando una página web y tengo el siguiente problema; Resulta que esta página web tiene 3 secciones (divs) seguidas, separadas visualmente por el fondo de cada sección. es decir, la estructura es la siguiente:

-------
SEC 1.
-------
SEC 2.
-------
SEC 3.
-------

En cada una de las secciones hay 2 enlaces al resto de secciones diferentes a la que nos encontremos utilizando una librería JavaScript que lleva a cabo una transición de todo el contenido hasta mostrar la sección pertinente. O sea, si estoy en la SEC 1. y hago clic en el enlace que me lleve a la SEC 3. el efecto es que la página web hace una especie de scroll automático hacia la SEC 3.

Pues bien, (espero se haya entendido lo anterior) el problema es que cada sección de la página web debería tener como alto mínimo (min-height) el alto de la pantalla en la que se cargue la página web y no consigo encontrar la solución. Esto debe ser así porque si indico algún número en la propiedad height y resulta que el height de la pantalla es mucho mayor, se verá la sección siguiente a la que me encuentre (y eso es precisamente lo que quiero evitar).

Si alguien tiene alguna idea agradecería me la comentase. He probado con varias medio-soluciones que he encontrado pero nada.


Un saludo.

[jomaruro]

Hola:

Pienso que puede servirte este ejemplo de Mikmoro: http://www.araudi.net/ejemplos/tabs_activo.html

Saludos.

[TotemmetoT]

Gracias por la respuesta jomaruro, interesante enlace pero no entiendo como resuelve mi problema.

Lo que ocurre es que en mi página web todo el contenido es visible (o cargado) desde el inicio. Lo que quiero es que sólo se vea el contenido de la sección en la que me encuentre. Por ello es por lo que necesito que el height de cada sección sea, como mínimo, el height visible del navegador.

Gracias por tu comentario.


Mis dos soluciones hasta el momento han sido:

· Crear un div "separator" cuyo height sea de 1000px e incluirlo entre sección y sección

Código:

.separator {
    height: 1000px;
}

Código:

...
<div id="sec1">
    ...
</div>
<div class="separator">
</div>
<div id="sec2">
    ...
</div>
...

· Asignar el min-height de cada sección a 1000px.


¿A alguien se le ocurre alguna más (ya sea en CSS, JavaScript, ...)?

[TotemmetoT]

Se me ha ocurrido una cosa, aunque no me gusta porque no separaría el código de presentación del código de programación, que es la siguiente:

Código:

...
<script language="JavaScript"> 
    document.writeln(
        "#sec1, #sec2, #sec3 { height: " + height + "}")
</script>
...

¿Alguna nueva sugerencia o comentario sobree esta solución?