Foros del Web » Creando para Internet » CSS »

Div al 100% de altura

Estas en el tema de Div al 100% de altura en el foro de CSS en Foros del Web. Hola gente. Quiero hacer una web personal, mediante scrollto hago que desde los links del menu baje o suba a la seccion correspondiente. Me gustaria ...
  #1 (permalink)  
Antiguo 07/10/2013, 09:15
 
Fecha de Ingreso: febrero-2012
Mensajes: 59
Antigüedad: 10 años, 4 meses
Puntos: 0
Div al 100% de altura

Hola gente.

Quiero hacer una web personal, mediante scrollto hago que desde los links del menu baje o suba a la seccion correspondiente.

Me gustaria saber como puedo hacer que cada div ocupe el 100% de la altura del navegador, ya que hay algunos que no lo hacen y se ve el siguiente contenido.

Espero haberme explicado bien, si no, os intentare buscar algun ejemplo de alguna web que lo haga.

Gracias a todos.
  #2 (permalink)  
Antiguo 07/10/2013, 09:25
Colaborador
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 3.648
Antigüedad: 8 años, 9 meses
Puntos: 578
Respuesta: Div al 100% de altura

Buena autorespuesta...

Código CSS:
Ver original
  1. div{
  2. height: 100%;
  3. }

Saludos
  #3 (permalink)  
Antiguo 07/10/2013, 09:40
 
Fecha de Ingreso: febrero-2012
Mensajes: 59
Antigüedad: 10 años, 4 meses
Puntos: 0
Respuesta: Div al 100% de altura

Cita:
Iniciado por PHPeros Ver Mensaje
Buena autorespuesta...

Código CSS:
Ver original
  1. div{
  2. height: 100%;
  3. }

Saludos
Como que no funciona, si no, no hubiese hecho una pregunta que "parece" tan obvia.

La cosa es imaginate una web de 4 secciones a,b,c,d pues yo quiero que al pinchar en a o b o c o d al llegar con el scroll to a esa seccion se vea al 100% de altura, no ocupando lo que ocupe por contenido
  #4 (permalink)  
Antiguo 07/10/2013, 09:44
Colaborador
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 3.648
Antigüedad: 8 años, 9 meses
Puntos: 578
Respuesta: Div al 100% de altura

No me lo voy a imaginar todo así que si haces el favor pon un poco de código.
  #5 (permalink)  
Antiguo 07/10/2013, 10:18
 
Fecha de Ingreso: agosto-2013
Mensajes: 46
Antigüedad: 8 años, 9 meses
Puntos: 12
Respuesta: Div al 100% de altura

no se necesita imaginacion, solo responder en base a la información ofrecida en la consulta

Código CSS:
Ver original
  1. width: 100vh;
  #6 (permalink)  
Antiguo 07/10/2013, 10:35
Colaborador
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 3.648
Antigüedad: 8 años, 9 meses
Puntos: 578
Respuesta: Div al 100% de altura

Es prácticamente lo mismo que dar porcentaje.
  #7 (permalink)  
Antiguo 07/10/2013, 10:36
 
Fecha de Ingreso: agosto-2013
Mensajes: 46
Antigüedad: 8 años, 9 meses
Puntos: 12
Respuesta: Div al 100% de altura

eso, dicho como la ha dicho es falso en un 99.99999......9% de las veces
  #8 (permalink)  
Antiguo 07/10/2013, 10:42
Colaborador
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 3.648
Antigüedad: 8 años, 9 meses
Puntos: 578
Respuesta: Div al 100% de altura

Si quieres que aumente en función de la ventana es mejor usar box-flex en css3. Te ahorrass un montón de bugs...
  #9 (permalink)  
Antiguo 07/10/2013, 11:05
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.487
Antigüedad: 19 años, 10 meses
Puntos: 2114
Respuesta: Div al 100% de altura

Lo habitual es crear un contenedor que mida el número de secciones por cien, y luego cada sección que mida cien entre el número de secciones.

Algo así:

Código HTML:
Ver original
  1. <div id="contenedor">
  2.   <div class="seccion"></div>
  3.   <div class="seccion"></div>
  4.   <div class="seccion"></div>
  5.   <div class="seccion"></div>
  6. </div>

Código CSS:
Ver original
  1. html, body {
  2.   height: 100%;
  3. }
  4.  
  5. #contenedor {
  6.   height: 400%;
  7. }
  8.  
  9. .seccion {
  10.   height: 25%;
  11. }
  #10 (permalink)  
Antiguo 07/10/2013, 11:26
 
Fecha de Ingreso: agosto-2013
Mensajes: 46
Antigüedad: 8 años, 9 meses
Puntos: 12
Respuesta: Div al 100% de altura

Cita:
Iniciado por PHPeros Ver Mensaje
Si quieres que aumente en función de la ventana es mejor usar box-flex en css3. Te ahorrass un montón de bugs...
¿estás trolleando o solo por sumar respuestas?

solo un apunte sobre el box-*: http://css-tricks.com/old-flexbox-and-new-flexbox/

pzin
creo que supones (das por hecho) demasiadas cosas
  #11 (permalink)  
Antiguo 07/10/2013, 12:58
 
Fecha de Ingreso: febrero-2012
Mensajes: 59
Antigüedad: 10 años, 4 meses
Puntos: 0
Respuesta: Div al 100% de altura

No discutais.

La idea exacta seria esta: http://diegoberges.com/
  #12 (permalink)  
Antiguo 07/10/2013, 13:25
Colaborador
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 3.648
Antigüedad: 8 años, 9 meses
Puntos: 578
Respuesta: Div al 100% de altura

Hola, tengo la solución pese al palo que me han dado
Primero tienes que importar jquery y elegir los links clave que harán el efecto:

Código Javascript:
Ver original
  1. $('a[href=#id]').click(function (){
  2. $('html, body').animate({
  3. scrollTop: 400}, //Puedes cambiar el numero de pixls
  4. 'slow'); //desplazamiento lento
  5. });
Es una animación sencilla.

Saludos

Última edición por PHPeros; 07/10/2013 a las 13:45
  #13 (permalink)  
Antiguo 07/10/2013, 13:45
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.487
Antigüedad: 19 años, 10 meses
Puntos: 2114
Respuesta: Div al 100% de altura

Cita:
Iniciado por faillure Ver Mensaje
pzin
creo que supones (das por hecho) demasiadas cosas
Ehmm... Supongo que si.

PHPeros creo que esa parte ya la controlaba bien, es lo primero que dice en el mensaje.
  #14 (permalink)  
Antiguo 07/10/2013, 13:48
Colaborador
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 3.648
Antigüedad: 8 años, 9 meses
Puntos: 578
Respuesta: Div al 100% de altura

Cita:
PHPeros creo que esa parte ya la controlaba bien, es lo primero que dice en el mensaje.
Pues le has dado el code y no te ha dicho nada
Ese es el único super efecto que veo en la web, y no creo que sea suya
  #15 (permalink)  
Antiguo 07/10/2013, 14:12
 
Fecha de Ingreso: febrero-2012
Mensajes: 59
Antigüedad: 10 años, 4 meses
Puntos: 0
Respuesta: Div al 100% de altura

Cita:
Iniciado por PHPeros Ver Mensaje
Pues le has dado el code y no te ha dicho nada
Ese es el único super efecto que veo en la web, y no creo que sea suya
Primero la web es mia, pero tube que utilizar el theme que veis pq me corria prisa y ahora la estoy haciendo yo completamente de 0 y por eso tenía esa duda.

Segundo, veo que presupones muchas cosas y no se pq siempre contestas de esas formas PHPeros, nadie imagino que conteste para llevarte la contraria, simplemente aportan lo que ellos creen.

Y 3º ese efecto de scrollTop creo que no es el correcto, primero pq no esta en ninguna parte del codigo y segundo pq seria una medida exacta lo que me has dado (no he probado a ponerlo con %) pero si te fijas la altura de la web varia desde un minimo hasta un maximo (que en mi pantalla de 24" no tiene fin)

Saludos y gracias a todos por la ayuda.
  #16 (permalink)  
Antiguo 08/10/2013, 07:29
Colaborador
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 3.648
Antigüedad: 8 años, 9 meses
Puntos: 578
Respuesta: Div al 100% de altura

Todos contentos pues
  #17 (permalink)  
Antiguo 08/10/2013, 07:36
 
Fecha de Ingreso: febrero-2012
Mensajes: 59
Antigüedad: 10 años, 4 meses
Puntos: 0
Respuesta: Div al 100% de altura

Todos no, mi duda no ha sido resuelta.
  #18 (permalink)  
Antiguo 08/10/2013, 07:43
Colaborador
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 3.648
Antigüedad: 8 años, 9 meses
Puntos: 578
Respuesta: Div al 100% de altura

Y que más necesitas? Lo del div ya ha sido contestado antes.
  #19 (permalink)  
Antiguo 08/10/2013, 07:57
 
Fecha de Ingreso: febrero-2012
Mensajes: 59
Antigüedad: 10 años, 4 meses
Puntos: 0
Respuesta: Div al 100% de altura

Cita:
Iniciado por PHPeros Ver Mensaje
Y que más necesitas? Lo del div ya ha sido contestado antes.
Tu respuesta esta mal, asi que deja de escribir por escribir, si quieres ayudar vale, si no, deja de sumar mensajes, que no beneficias a nadie.

Voy a comprobar la de Pzin que no la vi ayer, como llenasteis el post de discusion... no lo vi.
  #20 (permalink)  
Antiguo 08/10/2013, 08:08
Colaborador
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 3.648
Antigüedad: 8 años, 9 meses
Puntos: 578
Respuesta: Div al 100% de altura

Para la siguiente acuérdate que no se escribe tube ni saver.

Tampoco tenía pensado "beneficiarte".
  #21 (permalink)  
Antiguo 08/10/2013, 08:11
 
Fecha de Ingreso: febrero-2012
Mensajes: 59
Antigüedad: 10 años, 4 meses
Puntos: 0
Respuesta: Div al 100% de altura

Cita:
Iniciado por PHPeros Ver Mensaje
Para la siguiente acuérdate que no se escribe tube ni saver.
No tenia pensado "beneficiarte".
Y a ti mas te valdria saber algo mas de programación, que ser tan listillo, que para lo que ayudas aqui, te podrías quedar en casa.
  #22 (permalink)  
Antiguo 08/10/2013, 09:22
 
Fecha de Ingreso: agosto-2013
Mensajes: 46
Antigüedad: 8 años, 9 meses
Puntos: 12
Respuesta: Div al 100% de altura

Cita:
Iniciado por dBer Ver Mensaje
Voy a comprobar la de Pzin que no la vi ayer, como llenasteis el post de discusion... no lo vi.
se ve que no es el único que no viste, porque prefiero pensar que es esa la razón de tu indiferencia y silencio a la respuesta en mi primer comentario (5)

ah! en los post tambien se corrigen las respuestas erroneas, no solo las duda del que lo abre.
  #23 (permalink)  
Antiguo 08/10/2013, 12:25
 
Fecha de Ingreso: febrero-2012
Mensajes: 59
Antigüedad: 10 años, 4 meses
Puntos: 0
Respuesta: Div al 100% de altura

Cita:
Iniciado por faillure Ver Mensaje
se ve que no es el único que no viste, porque prefiero pensar que es esa la razón de tu indiferencia y silencio a la respuesta en mi primer comentario (5)

ah! en los post tambien se corrigen las respuestas erroneas, no solo las duda del que lo abre.
Pues no la verdad que no, pq otra cosa no, pero siempre agradezco las respuestas que se me ofrecen.

Lo probare e indagare algo mas sobre ello.

Y yo no digo que solo haya que contestar mi duda, pero si que digo que no hay que desviarse tanto del tema como así ha sucedido.

Etiquetas: altura, contenido
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 08:55.