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

[matiD]

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:

<div class="container-fluid color1">
</div>
 
<div class="container-fluid color2">
</div>
 
<div class="container-fluid color3">
</div>
 

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

muchas gracias!