全视口高度缩放div只是css否js …可能？

好的,我试图得到一个div来缩放,高度总是视口的高度.我将链接到我的例子,因为它需要一些解释.

www.madmediablitz.com/tv/precentdemo.html

上面的链接是我最接近一个解决方案,我希望有人在这里会发现很容易解决.我想要发生的是电视始终是视口的高度(在一定程度上,最小高度：〜400px;最大高度：〜700px;).我使用的代码是基于http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/.

www.madmediablitz.com/tv/precentdemo_alt.html

这是我不想发生的事情.如果您调整窗口大小,您将看到它不按比例缩放.

现在我已经尝试了这两个时间了,现在我已经没有办法了.我真的在祈求帮助,因为我觉得这并不太复杂.

<div id="welcome">
   your content on screen 1
</div>

<div id="projects">
   your content on screen 2
</div>


div#welcome {
    height: 100vh;
    BACkground: black;
}

div#projects {
    height: 100vh;
    BACkground: yellow;
}