Foros del Web » Creando para Internet » CSS »

3 divs cada uno al 100%

Estas en el tema de 3 divs cada uno al 100% en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 20/07/2010, 10:05
 
Fecha de Ingreso: julio-2010
Mensajes: 21
Antigüedad: 7 años, 4 meses
Puntos: 0
3 divs cada uno al 100%

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.
  #2 (permalink)  
Antiguo 20/07/2010, 17:19
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: 3 divs cada uno al 100%

Hola:

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

Saludos.

  #3 (permalink)  
Antiguo 21/07/2010, 03:43
 
Fecha de Ingreso: julio-2010
Mensajes: 21
Antigüedad: 7 años, 4 meses
Puntos: 0
Respuesta: 3 divs cada uno al 100%

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, ...)?

Última edición por TotemmetoT; 21/07/2010 a las 06:13
  #4 (permalink)  
Antiguo 21/07/2010, 06:21
 
Fecha de Ingreso: julio-2010
Mensajes: 21
Antigüedad: 7 años, 4 meses
Puntos: 0
Respuesta: 3 divs cada uno al 100%

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?

Etiquetas: Ninguno
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 15:09.