Foros del Web » Creando para Internet » CSS »

Como hacer que las secciones ocupen cada una el 100% del alto dispositivo

Estas en el tema de Como hacer que las secciones ocupen cada una el 100% del alto dispositivo en el foro de CSS en Foros del Web. Como están estoy con un problema que no logro solucionar. Estoy trabajando en una web que tiene 3 secciones en la página de inicio las ...
  #1 (permalink)  
Antiguo 07/12/2015, 17:16
 
Fecha de Ingreso: octubre-2008
Mensajes: 85
Antigüedad: 12 años, 7 meses
Puntos: 0
Como hacer que las secciones ocupen cada una el 100% del alto dispositivo

Como están estoy con un problema que no logro solucionar. Estoy trabajando en una web que tiene 3 secciones en la página de inicio las cuales ocupan el 100% del ancho cada una pero necesito también que ocupen el 100% del alto de la ventana que lo está visualizando.

Es decir si el alto de una ventana es de 700 entones tiene que rellenar 700px pero si la pantalla tiene 550 tiene que ocupar 550 de alto cada sección. El ancho es más que sencillo con container-fluid de bootstrap lo consigo pero se me complica dar el 100% del alto variable.

Como se ve en la ilustración a continuación tiene un alto X en un navegador de escritorio pero en movil se encoje pero aún así ocupa el 100% del dispositivo.
esto serían 3 contenedores
Código HTML:
Ver original
  1. <div class="container-fluid color1">
  2. </div>
  3.  
  4. <div class="container-fluid color2">
  5. </div>
  6.  
  7. <div class="container-fluid color3">
  8. </div>



Pero no encuentro la manera de hacerlo alguno de ustedes sabe como puedo hacer?

muchas gracias!

Última edición por matiD; 07/12/2015 a las 17:29
  #2 (permalink)  
Antiguo 07/12/2015, 19:01
Avatar de AngelKrak  
Fecha de Ingreso: noviembre-2014
Mensajes: 917
Antigüedad: 6 años, 5 meses
Puntos: 91
Respuesta: Como hacer que las secciones ocupen cada una el 100% del alto dispositivo

pues para que ocupe el 100%, prueba con height: 100vh; eso hace lo que quieres, pero nose hasta que punto te convendría jejeje xD

Etiquetas: alto, bootstrap, cada, dispositivo, secciones
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 14:21.